Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to submit an HTML form using JavaScript?
In this tutorial, we will learn how to submit an HTML form using JavaScript. JavaScript provides multiple approaches to handle form submission, from direct programmatic submission to validation-based submission with user feedback.
We will discuss two main methods for submitting HTML forms:
Using the Form submit() Method
Using Manual Validation
Let us explore both methods with practical examples.
Using the Form submit() Method
The submit() method programmatically submits a form without requiring user interaction with the submit button. This method takes no parameters and returns no value?it simply triggers form submission.
Note: You can use the Form reset() method to clear all form fields after submission.
Syntax
var selectedForm = document.getElementById("formId");
selectedForm.submit();
First, we select the form element by its ID, then call the submit() method to submit the form.
Example
The following example demonstrates how to use the submit() method:
<!DOCTYPE html>
<html>
<body>
<h2>Submit Form Using JavaScript</h2>
<p id="result"></p>
<form id="myForm" action="#">
<label>Username:</label>
<input type="text" id="username" name="username"><br><br>
<label>Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="submitForm()">Submit Form</button>
</form>
<script>
function submitForm() {
var myForm = document.getElementById("myForm");
var result = document.getElementById("result");
// Display confirmation message
result.innerHTML = "<b>Form submitted successfully!</b>";
// Submit the form
myForm.submit();
}
</script>
</body>
</html>
In this example, clicking the button triggers the submitForm() function, which displays a confirmation message and submits the form programmatically.
Using Manual Validation
Manual validation allows you to check form data before submission. This method validates each input field and only submits the form if all validations pass. If validation fails, it displays error messages and focuses on the problematic field.
Example
The following example demonstrates form validation before submission:
<!DOCTYPE html>
<html>
<body>
<h2>Form Validation Example</h2>
<form name="myForm" action="#" onsubmit="return validate()">
<table cellspacing="5" cellpadding="5" border="1">
<tr>
<td align="right">Name:</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td><input type="email" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code:</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country:</td>
<td>
<select name="Country">
<option value="-1" selected>[Choose Country]</option>
<option value="1">Canada</option>
<option value="2">Sri Lanka</option>
<option value="3">Mexico</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script>
function validate() {
// Check if name is empty
if (document.myForm.Name.value == "") {
alert("Please provide your name!");
document.myForm.Name.focus();
return false;
}
// Check if email is empty
if (document.myForm.EMail.value == "") {
alert("Please provide your email!");
document.myForm.EMail.focus();
return false;
}
// Validate zip code (5 digits)
if (document.myForm.Zip.value == "" ||
isNaN(document.myForm.Zip.value) ||
document.myForm.Zip.value.length != 5) {
alert("Please provide a valid 5-digit zip code.");
document.myForm.Zip.focus();
return false;
}
// Check if country is selected
if (document.myForm.Country.value == "-1") {
alert("Please select your country!");
return false;
}
// All validations passed
return true;
}
</script>
</body>
</html>
This example validates each field before submission. If any field fails validation, an alert appears, the problematic field receives focus, and the function returns false to prevent submission. Only when all validations pass does the function return true, allowing the form to submit.
Comparison
| Method | Validation | User Feedback | Use Case |
|---|---|---|---|
| submit() Method | None | Minimal | Programmatic submission |
| Manual Validation | Custom validation rules | Error alerts and focus | User-friendly forms |
Conclusion
JavaScript offers flexible options for form submission. Use the submit() method for direct programmatic submission, or implement manual validation for better user experience and data integrity.
18K+ Views
