We have demonstrated various ways to submit a form in our earlier blogs. Sometimes there is a need to submit a form automatically. That brings up a great user experience while making them to submit entries.

Here we bring up this example, which demonstrates how to auto submit a form after a given interval of time.

Using window.onload event of JavaScript we have a initiated a timer and after that particular time form gets submitted.

There is a count down timer shown in our form to notify user that, form will submit in (say 20 seconds). Below are the glimpses for it :

// Initializing timer variable.
var x = 20;
var y = document.getElementById("timer");
// Display count down for 20 seconds
setInterval(function(){
if( x<=21 && x>=1)
{
x--;
y.innerHTML= ''+x+'';
if(x==1){
x=21;
}
}
}, 1000);

 

After completing 20 seconds, below Javascript function will submit form automatically.

// Form Submitting after 20 seconds.
var auto_refresh = setInterval(function() { submitform(); }, 20000);
// Form submit function.
function submitform(){
if( validate() ) // Calling validate function.
{ alert('Form is submitting.....');
document.getElementById("form").submit();
}
}

Our example, validates all fields before form submission by calling user defined validate() function.

 

 Watch live demo or download our codes to use it.

content -autosubmit

Download script   

 

Complete HTML and Javascript codes are given below.

HTML file: auto_submit.html
Given below our complete HTML code for a form without submit button.

<html>
<head>
<title>Javascript AutoSubmit Form Example</title>
<!-- Include CSS File Here-->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here-->
<script src="js/auto_submit.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="success.html" method="post" id="form">
<h2>Javascript AutoSubmit Form Example</h2>
<span>Form will automatically submit in <b id="timer">20</b> <b>seconds</b>.</span>
<label>Name :</label>
<input type="text" name="name" id="name" placeholder="Name" />
<label>Email :</label>
<input type="text" name="email" id="email" placeholder="Valid Email" />
<label>Gender :</label>
<input type="radio" name="gender" value="Male" id="male" />
<label>Male</label>
<input type="radio" name="gender" value="Female" id="female" />
<label>Female</label>
<label>Contact No. :</label>
<input type="text" name="contact" id="contact" placeholder="Contact No." />
</form>
</div>
</div>
</body>
</html>

 

 

Javascript file: auto_submit.js
In the below script, count down displays for 20 seconds and then form will submit automatically on load event.

window.onload = function() {
// Onload event of Javascript
// Initializing timer variable
var x = 20;
var y = document.getElementById("timer");
// Display count down for 20s
setInterval(function() {
if (x <= 21 && x >= 1) {
x--;
y.innerHTML = '' + x + '';
if (x == 1) {
x = 21;
}
}
}, 1000);
// Form Submitting after 20s
var auto_refresh = setInterval(function() {
submitform();
}, 20000);
// Form submit function
function submitform() {
if (validate()) // Calling validate function
{
alert('Form is submitting.....');
document.getElementById("form").submit();
}
}
// To validate form fields before submission
function validate() {
// Storing Field Values in variables
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;
// Regular Expression For Email
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
// Conditions
if (name != '' && email != '' && contact != '') {
if (email.match(emailReg)) {
if (document.getElementById("male").checked || document.getElementById("female").checked) {
if (contact.length == 10) {
return true;
} else {
alert("The Contact No. must be at least 10 digit long!");
return false;
}
} else {
alert("You must select gender.....!");
return false;
}
} else {
alert("Invalid Email Address...!!!");
return false;
}
} else {
alert("All fields are required.....!");
return false;
}
}
};

 

 

CSS File: style.css

Styling HTML elements.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
span{
display: block;
margin-top: 10px;
font-weight:bold;
}
b{
color:red;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
center{
font-size: 31px;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 306px;
padding: 10px 50px 0px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top: 30px;
}
input[type=text]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
input[type=radio]{
margin: 10px 10px 0 10px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=submit]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

Pabbly Form Builder

Conclusion:
This was all about to automatically submit a form using JavaScript. You can change the time limit of the form submit according to you. Hope you like it, keep reading our other blogs for more knowledge.

Related Posts:

JavaScript Form Validation With Limit Login Attempts
JavaScript Onsubmit Event with form validation
JavaScript Change Form Action Dynamically