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
HTML DOM Form submit() method
The HTML DOM Form submit() method is used to programmatically submit form data to the server address specified by the action attribute. This method acts like clicking a submit button, triggering form submission without user interaction.
Syntax
Following is the syntax for the Form submit() method −
formObject.submit()
Parameters
The submit() method does not take any parameters.
Return Value
The method does not return any value. It simply submits the form data to the server.
Example − Basic Form Submission
Following example demonstrates how to use the submit() method to programmatically submit a form −
<!DOCTYPE html>
<html>
<head>
<title>Form submit() Method Example</title>
<style>
form {
border: 2px solid blue;
margin: 10px;
padding: 15px;
font-family: Arial, sans-serif;
}
input[type="text"] {
padding: 5px;
margin: 5px;
}
button {
padding: 8px 15px;
margin: 5px;
}
</style>
</head>
<body>
<h2>Form submit() Method Example</h2>
<form id="userForm" method="post" action="/submit_page.php">
<label>User Name: <input type="text" name="username" value="john_doe"></label><br><br>
<label>Age: <input type="text" name="age" value="25"></label><br><br>
<button type="button" onclick="submitForm()">Submit Form</button>
<button type="button" onclick="resetForm()">Reset Form</button>
</form>
<p id="message"></p>
<script>
function submitForm() {
document.getElementById("userForm").submit();
document.getElementById("message").innerHTML = "Form submitted successfully!";
}
function resetForm() {
document.getElementById("userForm").reset();
document.getElementById("message").innerHTML = "Form has been reset";
}
</script>
</body>
</html>
The output shows a form with input fields and buttons. Clicking "Submit Form" triggers the submit() method −
Form submit() Method Example User Name: john_doe Age: 25 [Submit Form] [Reset Form] (Clicking Submit Form submits the form and displays: Form submitted successfully!)
Example − Conditional Form Submission
Following example shows how to validate form data before using the submit() method −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Validated Form Submission</h2>
<form id="contactForm" method="post" action="/contact.php">
<label>Email: <input type="email" id="email" name="email" required></label><br><br>
<label>Message: <textarea id="message" name="message" rows="4" cols="30"></textarea></label><br><br>
<button type="button" onclick="validateAndSubmit()">Send Message</button>
</form>
<p id="status"></p>
<script>
function validateAndSubmit() {
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
if (email === "" || message === "") {
document.getElementById("status").innerHTML = "Please fill all fields!";
document.getElementById("status").style.color = "red";
} else {
document.getElementById("contactForm").submit();
document.getElementById("status").innerHTML = "Message sent successfully!";
document.getElementById("status").style.color = "green";
}
}
</script>
</body>
</html>
This example validates the form fields before calling submit(). If validation fails, an error message appears instead of submitting the form.
Example − Multiple Forms on One Page
Following example demonstrates handling multiple forms using the submit() method −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
<style>
.form-container {
border: 1px solid #ccc;
padding: 15px;
margin: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Forms Submission</h2>
<div class="form-container">
<h3>Login Form</h3>
<form id="loginForm" method="post" action="/login.php">
<input type="text" name="username" placeholder="Username"><br><br>
<input type="password" name="password" placeholder="Password"><br><br>
<button type="button" onclick="submitSpecificForm('loginForm')">Login</button>
</form>
</div>
<div class="form-container">
<h3>Registration Form</h3>
<form id="registerForm" method="post" action="/register.php">
<input type="text" name="fullname" placeholder="Full Name"><br><br>
<input type="email" name="email" placeholder="Email"><br><br>
<button type="button" onclick="submitSpecificForm('registerForm')">Register</button>
</form>
</div>
<p id="result"></p>
<script>
function submitSpecificForm(formId) {
document.getElementById(formId).submit();
document.getElementById("result").innerHTML = "Form '" + formId + "' submitted!";
}
</script>
</body>
</html>
This example shows how to handle multiple forms on the same page using a single function that accepts the form ID as a parameter.
How It Works
The submit() method performs the following actions −
-
Collects form data − Gathers all form field values with their respective
nameattributes. -
Constructs request − Creates an HTTP request using the form's
methodattribute (GET or POST). -
Sends to server − Submits the data to the URL specified in the
actionattribute. -
Bypasses validation − Unlike clicking a submit button, the
submit()method does not trigger HTML5 validation oronsubmitevent handlers.
Key Points
-
The
submit()method submits the form immediately without triggering validation or event handlers. -
It collects all form field data and sends it to the server using the form's
methodandactionattributes. -
Custom validation should be performed before calling
submit()since it bypasses HTML5 validation. -
The method is commonly used for conditional form submission based on JavaScript logic.
Conclusion
The HTML DOM Form submit() method provides a way to programmatically submit forms using JavaScript. It is particularly useful for implementing custom validation logic or conditional form submission. Remember that this method bypasses HTML5 validation, so manual validation should be performed when needed.
1K+ Views
