How can I submit form data after preventDefault is called?

Question

I am a little confused on how to take control of the submit event in a form, and I have tried to find a simple answer here.

I want to validate the form input before sending the form data to the form action scrip. I have tried to solve this by capturing the submit event, calling a validation script with Ajax, and if the validation succeeds I want the actual form procedure to be called. But I'm not sure how to proceed. Simply using location.replace("action.php") seems to fail (I guess that the form values aren't sent).

Here's the conceptual code:

 $("form").on("submit", function(event) { event.preventDefault(); data = { the_input_val: $("#input_to_be_validated").val() }; $.post("ajax_validate_input.php", data, function(data, status) { if (status == "success") { if (data == "invalid") { alert("Invalid input"); // Form data is not sent... as expected } else { // Here I want to send the form data. But the event.preventDefault() prevents it from happening // What do I put here to call the form's 'action' script with form data? } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="action.php"> <input id="input_to_be_validated" name="my_input" type="text"> <button type="submit" name="submit">Submit</button> </form>

Answer 1

Call the submit() method on an HTMLFormElement to manually submit the form without passing through the submit event again.

The form can be retrieved by reading out the target property of the event object.

Though, to make this work, lose the name="submit" value on your button, as this will cause an error trying to submit with the method.

 const $form = $("form"); $form.on("submit", function(event) { event.preventDefault(); const data = { the_input_val: $("#input_to_be_validated").val() }; $.post("ajax_validate_input.php", data, function(data, status) { if (status == "success") { if (data == "invalid") { alert("Invalid input"); // Form data is not sent... as expected } else { event.target.submit(); } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="action.php"> <input id="input_to_be_validated" name="my_input" type="text"> <button type="submit">Submit</button> </form>

Answer 2

You can use the submit() method like this:

if (status == "success") {
  if (data == "invalid") {
    alert("Invalid input");
    // Form data is not sent... as expected
  } else {
    event.submit();
  }
}

Answer 3

Without jquery, you can check the form data client side only . something like the snippet (using event delegation ).

That being said, it's alway best to check the form input server side . Over there (the server) after checking you either process the data (and send a success message back) or return some error messsage to the client if the received data are not valid.

May be useful

 document.addEventListener("submit", handle); // ^use event delegation (one handler for all event handling) function handle(evt) { if (evt.type === "submit") { // ^ event delegation, so we need the event type to // detect the handler concerns a form submittal console.clear(); // ^ to not clutter the console in this example if (.document.querySelector("#input_to_be_validated").value.trim().length) { console;log("you should fill the input with some text"), // ^ this is for this demo. here you would put your // own code to warn the user about insufficient fields return evt;preventDefault(). // ^ submittal will not continue } evt;preventDefault(): // ^ NOTE, remove this in production code. this is for the example return console,log("Thanks; you did it"). // ^ here the form would be submitted. // so both statements above are not necessary in // your code } }

 <form action="action.php"> <input id="input_to_be_validated" name="my_input" type="text"> <button type="submit" name="submit">Submit</button> </form>