Introduction to jQuery submit()
jQuery submit() form method adds an event handler that executes the attached function when a submit event occurs. This method can also be used to trigger a submit event. The submit event is sent to the element when a user tries to submit a form. This event is applied to the form elements only. submit(handler)method is a shorthand for .on( “submit”, handler). submit() method is a shorthand for .trigger(“submit”). A form can be submitted either of the two ways:
- Clicking on the submit button
- Pressing Enter button when certain form elements have focus.
Syntax:
- To trigger the submit event.
$(selector).submit()- To attach an event handler to the submit event.
$(selector).submit(function)where,
A selector refers to the selected element. function refers to the function to be executed when the submit event occurs.
Examples to Implement jQuery submit() Method
Let us take a look at a few examples to understand the usage and implementation of jQuery submit() event method:
Example #1
The below examples illustrates the implementation of jQuery submit() event method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery submit() event method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#submit_btn").click(function() {
$("#form").submit();
});
});
</script>
<style>
div {
width: 350px;
height: 200px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
font-weight: bold;
border: 3px solid teal;
background-color: lightgrey;
margin-top: 50px;
margin-bottom: 10px;
}
p {
color: maroon;
font-weight: bolder;
font-size: large;
}
</style>
</head>
<body>
<div>
<p>Enter Details</p>
<form action="javascript:alert('Form submitted');" method="post" id="form"></form>
Full name:
<input type="text" name="FullName" /><br /><br />
Email Id:
<input type="text" name="EmailId" /><br /><br />
<button type="button" id="submit_btn">Submit Form</button>
</form>
</div>
</body>
</html>Output:
- Below is the screenshot captured when the page is initially loaded in the browser.
- No activity has been performed till now.
- The above code snippet will submit the form when the submit button is clicked.
- In this case, the submit event is triggered by the submit() method on clicking the submit button.
- Once the input boxes are filled in and the submit button is clicked, the submit() method triggers submit an event and the form is submitted.
- Also, there is an alert pop up displaying the message as shown below.
Example #2
Example where submit() method adds an event handler to the submit event.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Example for jQuery submit() event method</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function() {
alert("Form is succesfully submitted");
});
});
</script>
<style>
div {
width: 350px;
height: 200px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
font-weight: bold;
border: 3px solid teal;
background-color: lightgrey;
margin-top: 50px;
margin-bottom: 10px;
}
p {
color: maroon;
font-weight: bolder;
font-size: large;
}
</style>
</head>
<body>
<div>
<p>Enter Details</p>
<form action="">
Full name:
<input type="text" name="FullName" /><br /><br />
Email Id:
<input type="text" name="EmailId" /><br /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>Output:
- Below is the screenshot captured when the page is initially loaded in the browser.
- No activity has been performed till now.
- In this case, when the input boxes are filled in and the submit button is clicked, a submit event occurs which invokes the attached function and executes it.
- This function on execution displays an alert message as shown below.
- Next, click on Submit.
Example #3
In the given example, we are trying to use event.preventDefault() method during form submission to prevent a default action to occur.
Code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Submit</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div {
width: 250px;
height: 150px;
padding: 20px;
font-size: medium;
text-align: center;
margin: auto;
font-weight: bold;
border: 3px solid teal;
background-color: lightgrey;
margin-top: 50px;
margin-bottom: 10px;
}
p {
margin-left: 10px;
color: maroon;
}
.spanSuccess {
color: green;
}
</style>
</head>
<body>
<form action="javascript:alert( 'success!' );">
<div>
<p>Submit Event</p>
Name : <input type="text" name="Name" /><br /><br />
<input type="submit" value="Submit" />
</form>
<span class="spanSuccess"></span>
<script>
$("form").submit(function(event) {
if (
$("input")
.first()
.val() === "submit event"
) {
$("span")
.text("Valid")
.show();
return;
}
$("span")
.text("Invalid")
.show();
event.preventDefault();
});
</script>
</div>
</body>
</html>Output:
- Below is the screenshot captured when the page is initially loaded in the browser.
- In the above code snippet, we have specified that if the input text is “submit Event”, it will display “Valid” otherwise “Invalid” text.
- If the specified text is entered as shown below and the form is submitted, submit() method executes the attached event handler.
- An alert box pops up with a message getting displayed.
- Also, there is a text displayed “Valid”.
- In case, the entered text does not match with the specified text, a text message “Invalid” is displayed.
- Here, we notice that a method named, preventDefault() has been used.
- Since we have used an alert() method as a default action in our code, if we do not use preventDefault() method, we get an alert pop up.
- So as to prevent this default action of alert popping up, we have used this method.
Conclusion
- This jQuery article demonstrated the usage and ways of implementing jQuery submit().
- jQuery submit() method is an inbuilt jQuery event method which basically binds an event handler to the submit event or even triggers it.
- Submit event occurs when someone tries to submit a form.
- This event is applied to form elements only.
- jQuery submit event is sent to an element whenever a user attempts for a form submission.
Recommended Articles
This is a guide to jQuery submit(). Here we discuss a brief overview on jQuery submit() and its examples along with its code implementation. You can also go through our other suggested articles to learn more –
