Introduction to JQUERY - Getting to Know How the submit() method works

Guest Posts Paolo Nikko Nuñal

In the previous tutorial we talked about binding handlers to any HTML element using the bind() method. This time around, we are going to tackle with the submit() method that is part of the events that you can trigger on  an HTML page. This is useful especially if you are trying to do "something" during a submit event like calculations or processing some data.

Syntax:

$([SELECTOR]).submit(HANDLER)

$([SELECTOR]).submit([EVENTDATA],HANDLER)

The submit event occurs when a specific form is submitted. However, please bear in mind that the event can only be used on <form> elements.

HANDLER(EVENT OBJECT) - a function to execute when the event is triggered.

EVENT DATA - an object containing the data to be passed on the event handler.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
      $(document).ready(function(){
          $("#form1").submit(function(){
               alert("Submit Function has been clicked");
          });
      });
</script>
</head>
<body>
<form id="form1">
Name <input type="text" name="name" value="John"><br>
Age: <input type="text" name="age" value="Doe"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>


The submit event is sent to an element when a user attempts to try to submit a form. In our example, when a user clicks on the Submit button, the form with the ID="form1" will automatically show an alert message stating it is triggered.

Binding elements with the submit() method is generally useful if you are trying to have a function or certain action do when that specific element is selected.