jQuery submit Event

Photo Credit to CodeToFun

🙋 Introduction

jQuery is an essential tool for web developers, providing a simplified way to handle HTML elements and events. One important event in web forms is the submit event. While the .submit() method is deprecated, jQuery's .on() method offers a modern and efficient way to handle form submissions.

In this guide, we'll explore the usage of the jQuery submit event using .on() with detailed examples to enhance your understanding.

🧠 Understanding submit Event

The submit event in jQuery is triggered when a form is submitted. This event is essential for validating form data and preventing default form submission actions when needed. By using the .on() method, you can efficiently handle this event and execute custom JavaScript functions.

💡 Syntax

The syntax for the submit event is straightforward:

syntax.js

Copied

.on("submit", [, eventData ], handler)

📝 Example

1. Basic Form Submission Handling:

   To handle form submissions, you can attach a submit event handler to a form. This allows you to execute custom code when the form is submitted.

   index.html

   Copied

   

   <form id="myForm">
     <input type="text" name="username" required>
     <input type="submit" value="Submit">
   </form>

   example.js

   Copied

   

   $("#myForm").on("submit", function(event) {
     event.preventDefault();
     alert("Form submitted!");
   });

   In this example, the form submission is prevented, and an alert is shown instead.

2. Validating Form Data Before Submission:

   You can use the submit event to validate form data before allowing the form to be submitted.

   index.html

   Copied

   

   <form id="myForm">
     <input type="text" name="username" id="username" required>
     <input type="password" name="password" id="password" required>
     <input type="submit" value="Submit">
   </form>

   example.js

   Copied

   

   $("#myForm").on("submit", function(event) {
     var isValid = true;
     if ($("#username").val() === "") {
         alert("Username is required.");
         isValid = false;
     }
     if ($("#password").val() === "") {
         alert("Password is required.");
         isValid = false;
     }
     if (!isValid) {
         event.preventDefault();
     }
   });

   This code checks if the username and password fields are filled before allowing the form to submit.

3. Submitting Form Data via AJAX:

   To enhance user experience, you can submit form data via AJAX without reloading the page.

   index.html

   Copied

   

   <form id="myForm">
     <input type="text" name="username" id="username" required>
     <input type="submit" value="Submit">
   </form>

   example.js

   Copied

   

   $("#myForm").on("submit", function(event) {
     event.preventDefault();
     $.ajax({
       type: "POST",
       url: "submit_form.php",
       data: $(this).serialize(),
       success: function(response) {
         alert("Form submitted successfully: " + response);
       },
       error: function() {
         alert("An error occurred.");
       }
     });
   });

   This code prevents the default form submission and sends the form data to submit_form.php using AJAX.

4. Handling Multiple Forms:

   If you have multiple forms on a page, you can use a common class to attach the submit event handler.

   index.html

   Copied

   

   <form class="ajaxForm">
     <input type="text" name="username" required>
     <input type="submit" value="Submit">
   </form>
   <form class="ajaxForm">
     <input type="text" name="email" required>
     <input type="submit" value="Submit">
   </form>

   example.js

   Copied

   

   $(".ajaxForm").on("submit", function(event) {
     event.preventDefault();
     // Handle the form submission
   });

   This approach ensures that all forms with the class ajaxForm are handled uniformly.

🎉 Conclusion

The jQuery submit event is a powerful tool for managing form submissions. By using the .on() method, you can effectively validate form data, handle submissions via AJAX, and ensure a seamless user experience.

Understanding and utilizing this event can significantly improve the interactivity and functionality of your web forms.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All