How to stop a form submit action using jQuery ?
Last Updated :
08 May, 2023
In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form, the task is to stop the submit action of the form using jQuery.
Approach 1: Use the on() and the preventDefault() method in jQuery. We attach a submit event to the form using the on() method which means the script inside this method is executed whenever the form is submitted. There is one parameter e which represents the event parameter or object. We use the preventDefault() method with this event to prevent the default action of the form, that is prevent the form from submitting.
Example: In this example, we will see the use of the preventDefault() method in jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
form {
width: 300px;
margin: 0 auto;
}
input[type="submit"] {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<form>
<fieldset>
<legend>Details</legend>
<label for="first_name">First name:</label>
<input type="text" id="first-name" name="fname" />
<br /><br />
<label for="last_name">Last name:</label>
<input type="text" id="last-name" name="lname" />
<br /><br />
<label for="gender">Gender : </label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female <br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br /><br />
<input type="submit" value="Submit" class="submit-btn" />
</fieldset>
</form>
<script type="text/javascript">
$("form").on("submit", function (e) {
e.preventDefault();
});
</script>
</body>
</html>
|
Output:
Approach 2: Using the submit() method in the jQuery library. We also attach a submit event to the form but here we are using the submit() method instead of the on() method. Inside this method, we simply return false such that the default action of the form is not executed.
Example: In this example, we will see the use of submit method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
button {
margin-top: 2rem;
cursor: pointer;
}
form {
width: 300px;
margin: 0 auto;
}
input[type="submit"] {
cursor: pointer;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<form>
<fieldset>
<legend>Details</legend>
<label for="first_name">First name:</label>
<input type="text" id="first-name" name="fname" />
<br /><br />
<label for="last_name">Last name:</label>
<input type="text" id="last-name" name="lname" />
<br /><br />
<label for="gender">Gender : </label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female <br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br /><br />
<input type="submit" value="Submit" class="submit-btn" />
</fieldset>
</form>
<script type="text/javascript">
$("form").submit(function (e) {
return false;
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...