submit button outside form is not submitting

user_16446012 0
Viewed 80

I have a form. Once the user enters the details and presses the submit button it shows another div and hides the original. In the other div the button is supposed to actually submit the form instead of the one in the form itself. I'm using preventDefault() to do this, but the submission is not working.

$('#tripinfo').submit(function(e) {
  if (e.originalEvent && e.originalEvent.isTrusted)
    e.preventDefault();

  $("#choosing").slideUp();
  $("#confirmation").slideDown();
});

$("#ok").click(function() {
  $('#tripinfo').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="rideHandler.php" method="POST" id="tripinfo">
  //form inputs
  <button type="submit" class="subBtn" name="offer"> Finish up</button>
</form>

<div class="confirmation" id="confirmation" style="display:none" ;>
  //not important stuff
  <button id="ok" type="submit" class="subBtn" name="ok">Offer my ride</button>
</div>

I don't think you need to see the PHP because it works without preventing the original button from submitting, but I'm using

if (isset($_POST['ok']))

Should it be if (isset($_POST['offer']))? Even though I tried it and nothing changed, what is the issue?

html php jquery javascript
3 Answers

The issue is because you're triggering the form submission through JS the ok property from the button will not be sent in the request (as it wasn't the click event of the button which directly triggered the form submission).

You will need to check for another form input value in the PHP to check if the POST request occurred to the current page.

That being said, I would strongly suggest you re-structure your HTML so that the hidden content is still within the form as the current pattern completely goes against accessibility guidelines. To do that change the original submit button to a standard button, and have the second button submit the form instead.

You can also manually check the validity of the form element(s) before allowing the new content to be displayed. The HTML would look something like this:

$('#offer').on('click', e => {
  if ($('#foo').get(0).checkValidity()) {
    $("#choosing").slideUp();
    $("#confirmation").slideDown();
  } else {
    $('#tripinfo').get(0).reportValidity();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="rideHandler.php" method="POST" id="tripinfo">
  <input type="text" id="foo" name="foo" required />
  <button id="offer" type="button" name="offer"> Finish up</button>

  <div class="confirmation" id="confirmation" style="display:none" ;>
    <input type="text" name="bar" required />
    <button id="ok" type="submit" class="subBtn" name="ok">Offer my ride</button>
  </div>
</form>

user_5194130

Change button type = "button" Because of the submit behavior of button it tries to submit the current form data but actually it is not in the form so it does nothing

 <button id="ok"  type ="button" class="subBtn" name="ok" >Offer my ride</button>
user_61551930

Replace form button with buttons to avoid any form submit event trigger Please check the code below

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>
  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  p:hover {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<div class="confirmation" id="choosing">
<form action="rideHandler.php" method="POST" id="tripinfo">
  //form inputs
  <input type="button" class="subBtn" name="offer" id="offer" value='Finish up' />
</form>
</div>
<div class="confirmation" id="confirmation" style="display:none" ;>
  //not important stuff
  <input type="button" class="subBtn" name="ok" id="ok" value='Offer my ride' />
</div>


<script>

$("#offer").click(function() {

  $("#choosing").slideUp();
  $("#confirmation").slideDown();

});


$( "#ok" ).click(function() {

$('#tripinfo').submit();
});
</script>

</body>
</html>
user_20353660
Related