BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery submit() Method

Last Updated: May 1, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery submit() Method triggers the submit event when the form is submitted. The submit() method attaches an event handler function to the “form”, this event handler function executes when the submit event is triggered.

jQuery submit() Method Syntax

$("form").submit(function(){
  //code to execute when the form is submitted.
});

jQuery submit() Example

In the following example we have a form with two input fields. The value of these two input fields are already populated, we want an alert message to displayed when the form is submitted. To do this, we have set an alert message inside submit event handler function, this event handler function executes when the form is submitted.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("form").submit(function(){
    alert("form is submitted.");
  });
});
</script>
</head>
<body>

<h2>jQuery submit event example on Beginnersbook.com</h2>
<form action="">
Your Name: <input type="text" name="name" value="Chaitanya"><br>
Your Age: <input type="text" name="age" value="31"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:
Before the form is submitted:
This screenshot is taken before the form is submitted.
jQuery submit
After the form is submitted:
This screenshot is taken after the form is submitted using submit button. As you can see an alert message is displayed, this alert message is set inside submit event handler function and it got executed when the form is submitted.
jQuery submit event

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery Sliding Effects
  3. jQuery keydown() Method
  4. jQuery blur() method
  5. jQuery keypress() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap