JavaScript form.submit
last modified April 2, 2025
In this article, we explore the form.submit method in JavaScript.
This method allows developers to submit HTML forms programmatically, enabling
dynamic form handling and enhanced user experiences.
Basic Definition
The form.submit() method submits a form programmatically without
requiring a submit button click. It triggers the form's submission process just
as if a submit button was clicked.
This method is useful when you need to submit forms based on certain conditions or events. It bypasses the need for a physical submit button in the form markup.
Basic form.submit
This example demonstrates how to submit a simple form programmatically.
<!DOCTYPE html>
<html>
<head>
<title>Basic form.submit</title>
</head>
<body>
<form id="myForm" action="/submit" method="post">
<input type="text" name="username" placeholder="Username">
</form>
<button onclick="submitForm()">Submit Form</button>
<script>
function submitForm() {
const form = document.getElementById('myForm');
form.submit();
}
</script>
</body>
</html>
In this basic example, we have a form with an ID and a separate button. The
JavaScript code retrieves the form using getElementById and calls
submit() on it when the button is clicked.
This demonstrates the fundamental usage of form.submit() to trigger
form submission programmatically. The form will be submitted to the specified
action URL with the POST method.
Form Submission with Validation
This example shows how to validate form data before submission.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<form id="loginForm" action="/login" method="post">
<input type="text" id="username" name="username" placeholder="Username">
<input type="password" id="password" name="password" placeholder="Password">
</form>
<button onclick="validateAndSubmit()">Login</button>
<p id="error" style="color:red"></p>
<script>
function validateAndSubmit() {
const form = document.getElementById('loginForm');
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorElement = document.getElementById('error');
if (!username || !password) {
errorElement.textContent = 'Both fields are required!';
return;
}
errorElement.textContent = '';
form.submit();
}
</script>
</body>
</html>
Here we have a login form with validation. The validateAndSubmit
function checks if both fields are filled before allowing submission.
This demonstrates how form.submit() can be used after validation.
The form only submits when all conditions are met, providing better user
feedback than default form submission.
Delayed Form Submission
This example demonstrates submitting a form after a delay.
<!DOCTYPE html>
<html>
<head>
<title>Delayed Submission</title>
</head>
<body>
<form id="surveyForm" action="/survey" method="post">
<textarea name="feedback" placeholder="Your feedback..."></textarea>
</form>
<button onclick="startCountdown()">Submit Feedback</button>
<p id="countdown"></p>
<script>
function startCountdown() {
const countdownElement = document.getElementById('countdown');
let seconds = 5;
countdownElement.textContent = `Submitting in ${seconds} seconds...`;
const interval = setInterval(() => {
seconds--;
countdownElement.textContent = `Submitting in ${seconds} seconds...`;
if (seconds <= 0) {
clearInterval(interval);
document.getElementById('surveyForm').submit();
}
}, 1000);
}
</script>
</body>
</html>
In this example, clicking the button starts a 5-second countdown before form submission. The user can see the countdown progress before the form submits.
This shows how form.submit() can be used with timing functions to
create delayed submissions. This pattern is useful for confirmation dialogs or
last-chance editing opportunities.
Multiple Form Submission
This example shows how to submit multiple forms with a single button.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms</title>
</head>
<body>
<form id="form1" action="/save1" method="post" target="_blank">
<input type="text" name="data1" placeholder="Data for form 1">
</form>
<form id="form2" action="/save2" method="post" target="_blank">
<input type="text" name="data2" placeholder="Data for form 2">
</form>
<button onclick="submitAllForms()">Save All Data</button>
<script>
function submitAllForms() {
document.getElementById('form1').submit();
document.getElementById('form2').submit();
alert('Both forms submitted!');
}
</script>
</body>
</html>
Here we have two separate forms that get submitted simultaneously with one button click. Each form has its own action URL and will submit independently.
This demonstrates how form.submit() can handle multiple forms.
Note that the forms open in new tabs due to the target="_blank"
attribute, which prevents navigation from the current page.
AJAX Alternative to form.submit
This example shows an AJAX alternative to traditional form submission.
<!DOCTYPE html>
<html>
<head>
<title>AJAX Form Submission</title>
</head>
<body>
<form id="ajaxForm">
<input type="text" name="email" placeholder="Your email">
<button type="button" onclick="submitViaAJAX()">Subscribe</button>
</form>
<p id="result"></p>
<script>
function submitViaAJAX() {
const form = document.getElementById('ajaxForm');
const formData = new FormData(form);
const resultElement = document.getElementById('result');
fetch('/subscribe', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
resultElement.textContent = data.message;
resultElement.style.color = 'green';
})
.catch(error => {
resultElement.textContent = 'Error: ' + error.message;
resultElement.style.color = 'red';
});
}
</script>
</body>
</html>
This example uses the Fetch API to submit form data asynchronously without page reload. The response is handled with promises to provide user feedback.
While not using form.submit() directly, this demonstrates a modern
alternative. AJAX submissions provide better user experience by avoiding full
page reloads and enabling more dynamic responses.
Source
In this article, we have shown how to use form.submit() in
JavaScript. This method is essential for programmatic form handling in web
development, offering flexibility in form submission workflows.
Author
List all JS DOM tutorials.