How to start form processing using JavaScript

Recently, I had a question - "How to start processing an HTML form using JavaScript?".

Processing the form is usually launched by pressing the Submit button (type='submit'), but there are cases when you need to start the form without pressing the button.

For example, we have a Select field:

<form method="get">
	<select name="vibor">
		<option value="value 1">value 1</option>
		<option value="value 2">value 2</option>
		<option value="value 3">value 3</option>
		<option value="value 4">value 4</option>
		<option value="value 5">choice 5</option>
	</select>
</form>

and we need to start form processing immediately when some value of this field is selected. In this case, the submit button will be redundant, and that's where JavaScript will help us.

In JavaScript management, there is a form object containing a submit() method. In this way, we can use the form identifier to later start the JS object submit().

For example, we have a form with id='myform', then the JavaScript code for starting the processing will be: document.forms["myform"].submit();

Code example for starting form processing when a value of SELECT field is selected:

<script type="text/javascript>
	function sform(){
		document.forms["myform"].submit();
	}
</script>
<form id="myform" method="get" action="#">
	<select name="vibor>
		<option value="value1" onclick='sform();'>value 1</option>
		<option value="value2" onclick='sform();'>value 2</option>
		<option value="value3" onclick='sform();'>value 3</option>
		<option value="value4" onclick='sform();'>value 4</option>
		<option value="value5" onclick='sform();'>value 5</option>
	</select>
</form>

You can also define a form using the name attribute:

<form name="myform" action="#">

Then you can start form processing like this: document.myform.submit();.

Or you can submit the select field by adding onchange='this.form.submit()', for example:

<form method="get" action="#">
	<select name="year" onchange='this.form.submit()'>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		<option value="2011">2011</option>
		<option value="2012">2012</option>
		<option value="2013">2013</option>
	</select>
</form>

Code example for starting form processing by clicking on a link:

<script type="text/javascript">
function submitform(){
	document.myform2.submit();
}
</script>
<form name="myform2" action="#" method='get'>
	Search: <input type='text' name='s' value='search query' />
	<a href="javascript: submitform()">Search</a>
</form>

In some cases, form processing can be started by applying such code to any action: this.form.submit().

Code example for starting form processing when selecting a Radio:

<form method="get" action="#" >
 <p><b>Which browser do you mainly use?</b><br />
   <input type="radio" name="browser" value="ie" onclick='this.form.submit()'> Internet Explorer<br />
   <input type="radio" name="browser" value="opera" onclick='this.form.submit()'> Opera<br />
   <input type="radio" name="browser" value="firefox" onclick='this.form.submit()'> Firefox<br />
  </p>
</form>

Finally, page with live examples (when submitted, pay attention to the address bar).