Forms present on the website enable users to transmit their information to the server. At times, you may wish to halt the data from being sent to avert unintentional submissions, verify user details, and manage user input in alternate ways. In this article, we will explore various techniques to prevent form submission utilizing JavaScript.
Table of Contents:
- Method to Halt Form Submission Using JavaScript
- Method 1: Utilizing event.preventDefault()
- Method 2: Preventing Form Submission on Button Click
- Method 3: Applying the Return False Technique
- Conclusion
Method to Halt Form Submission Using JavaScript
You may adopt techniques such as event.preventDefault(), cease form submission upon button click, and apply the return false technique. Let’s delve into these methodologies below.
Method 1: Utilizing event.preventDefault()
This technique can be employed to avert the typical action of an event from taking place. In the context of a form, the event.preventDefault() function prevents the form from being dispatched to the server.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Form on Button Click</title>
</head>
<body>
<form id="myForm">
<button id="submitButton" type="submit">Submit</button>
</form>
<script>
const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", function(event) {
event.preventDefault();
alert("Submission halted on button click!");
});
</script>
</body>
</html>Output:
Explanation: When attempting to submit the form with the name input alongside the submit button, the JavaScript code prevents the form from reaching the server. The JavaScript incorporates a document.getElementById(“myForm”) to identify the form and event.preventDefault() halts the default behavior of the form (which typically sends data to the server). Subsequently, an alert message is displayed.
Method 2: Preventing Form Submission on Button Click
This method focuses on the button rather than the form itself. Here, the targeted event is the click instead of the submit event. This technique is effective when additional information from the user is necessary prior to submitting the form.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Form on Button Click</title>
</head>
<body>
<form id="myForm">
<button id="submitButton" type="submit">Submit</button>
</form>
<script>
const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", function(event) {
event.preventDefault();
alert("Submission halted on button click!");
});
</script>
</body>
</html>Output:
Explanation: This code can be utilized to stop the form from being submitted. Upon clicking the button, the JavaScript function executes and halts the submission of the form. The function event.preventDefault() is implemented for this purpose. Ultimately, an alert message is displayed to the user.
Method 3: Applying the Return False Technique
This method can be used to obstruct the form submission. It is regarded as an older technique in comparison to the other approaches. This method produces a return value of false when it halts the submission.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Return False Example</title>
</head>
<body>
<form onsubmit="return preventSubmission()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
<script>
function preventSubmission() {
alert("Form submission halted!");
return false; // Prevents the form from being submitted
}
</script>
</body>
</html>Output:
Explanation: You can include the form onsubmit attribute within the HTML to invoke the JavaScript function preventSubmission(). This function is defined in the script tag. An alert message indicating that the form submission is halted will appear. Following this, the function returns false, preventing the form from being submitted.
Conclusion
The methods discussed above are among the most effective ways to disallow the submission of a form. You can leverage JavaScript functionalities such as event.preventDefault() and return false, as well as methods for stopping the form upon button clicks. Thus, you can offer users flexibility by avoiding unintentional submissions, enhancing the user-friendliness of the webpage.
How to Halt Form Submission in JavaScript – FAQs
The article How to Halt Form Submission Using JavaScript? first appeared on Intellipaat Blog.