A Beginner’s Guide to JavaScript Auto Submit HTML Form – JavaScript Tutorial

We usually click submit button to submit a html form, in this tutorial, we will introduce how to submit a form with javascript automatically.

Create a html form with test.html

You can use code below to create a html form in test.html.

<div>
<form id="form1" method="post" action="process.php">
	<p>webiste: <input type="text" name="website" value="tutorialexample.com" /></p>
    <p><input type="submit" value="submit" /></p>
</form>
</div>

In this form, we will submit a webiste to a process.php file with http post method.

Create a javascript function to submit form

Here is an example.

<script type="application/javascript">
function submitform(){
	document.getElementById("form1").submit();
}
</script>

You should copy and paste this example code in front of html form.

Submit html form

<script type="application/javascript">
submitform();
</script>

You shoud copy and paste this example code at the end of htm form.

Create process.php file

<?php
print_r($_POST);
?>

Copy and paste code above in process.php

Open test.html by your browser

You will find output like:

Array ( [website] => tutorialexample.com )

From the output, we wil find the process.php file has gained the data submitted by javascript.