How to run jQuery function on form submit?

Question

I have a jQuery function that I want to run after a form is successfully submitted. The function fades in a screen overflow then displays items in a list before redirecting to another url.

Here's the script:

    <script >
      function startCheck() {
    var e = $(".overlay-checker"),
        t = $(".overlay-checker-points > li");
    for (t.hide(), e.fadeIn(), i = 0; i < t.length; i++) setTimeout(function() {
        $(".overlay-checker-points").find(":hidden").first().fadeIn()
    }, 1500 * (i + 1));
    setTimeout(function() {
        window.location = $(".redirectNow").attr("href")
    }, 1500 * t.length + 2e3)
    }
   </script>

How do I run the above function after a form is successfully submitted?

Maybe by using the submit event? How do you run it now? Post a minimal reproducible example please — j08691
– j08691, Commented Apr 13, 2020 at 1:24
I don't have enough knowledge of jQuery to formulate anything close to a working example. — jrcollins
– jrcollins, Commented Apr 13, 2020 at 1:47

Will · Accepted Answer · 2020-04-13 02:03:57Z

1

You may use the following listener:

$(document).on("submit", "form", function(e){
   // Prevent form submission
   e.preventDefault();
   // Show loader
   // Optional, but showing that something's happening is probably good
   // Assuming you have some element with class "loader" hidden...
   $(".loader").show();
   // Submit form via ajax call
   $.ajax({
      url: "path_to_your_file.php",
      type: "post",
      data: $("form").serialize(),
      success: function(data){
         // Form submitted
         // Call script here 
      },
      error: function(data){
         // Handle error here
      },
      complete: function(){
         // Will be called after success or error
         // Hide loader (if shown before ajax call above)
         $(".loader").hide();
      }
   });
})

And on your server side, you can retrieve your form's inputs using $_POST["name"]

EDIT:

This is what your HTML form would look like:

<form>
   <input type="email" name="useremail" placeholder="Email address" required>
   <!-- Add any other input, select, textarea of your liking -->
   <button type="submit">Submit</button>
</form>

You'll retrieve the input in your PHP file like this:

$email = $_POST["useremail"];

edited Apr 13, 2020 at 2:03

answered Apr 13, 2020 at 1:31

Will

1,2031 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jrcollins Over a year ago

Thanks @Will. If I follow your example how do I format the form html? What about the action attribute?

Will Over a year ago

You can leave out the action attribute since the form will be submitted via ajax. I'm updating my response to show you how to put that form together.

Collectives™ on Stack Overflow

How to run jQuery function on form submit?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related