Tutorials

jQuery submit Event

Posted in jQuery Tutorial

Updated on Nov 01, 2024

By Mari Selvan

👁️ 46 - Views

⏳ 4 mins

💬 1 Comment

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

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.

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.

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.

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.