Updated June 22, 2023
Introduction to jQuery Submit ()
jQuery submit() form method adds an event handler that executes the attached function when a submit event occurs. You can also utilize this method to trigger a submit event. When a user tries to submit a form, the element receives the submit event. Please be aware that the event mentioned only applies to form elements. The method submit(handler) is a shorter version of .on(“submit,” handler), while the method submit() is a shorter version of .trigger(“submit”). Two ways are available for submitting the form:
- 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. When the submit event takes place, the specific action that will happen is called the “function.
Examples to Implement jQuery submit() method
Let us take a look at a few examples to understand the usage and implementation of the jQuery submit() event method:
Example #1
The examples below illustrate the jQuery submit() event method implementation.
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 after clicking the submit button.
- Clicking the submit button triggers the submit event through the submit() method.
- Clicking the submit button activates the submit() method, which initiates the form submission by triggering a submit event after filling in the input boxes.
- Also, an alert pop-up displays 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.
- Until now, no activity has taken place.
- When you fill in the input boxes and click the submit button, the submit event invokes and executes the attached function.
- 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 an event.preventDefault() method during form submission to prevent a default action from occurring.
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 displays a message when it pops up.
- Also, the system displays a “Valid” text.
- If the entered text does not match the specified text, the system displays an “Invalid” text message.
- Here, we notice the use of a method named preventDefault().
- Since we have used an alert() method as a default action in our code, we get an alert pop-up if we do not use the preventDefault() method.
- We have used this method to prevent this default alert action from popping up.
Conclusion
- This jQuery article demonstrated the usage and ways of implementing jQuery submit().
- The jQuery submit() method is an inbuilt jQuery event method that binds an event handler to the submit event or even triggers it.
- Submit event occurs when someone tries to submit a form.
- We apply this event only to form elements.
- The element receives a jQuery submit event whenever a user attempts a form submission.
Recommended Articles
This is a guide to jQuery submit(). Here we discuss a brief overview of jQuery submit(), its examples, and its code implementation. You can also go through our other suggested articles to learn more –
