Instantly Submit HTML Form Using IFrame and JavaScript

shabbir's Avatar author of Instantly Submit HTML Form Using IFrame and JavaScript
This is an article on Instantly Submit HTML Form Using IFrame and JavaScript in JavaScript and AJAX.
Rated 5.00 By 1 users
Have you ever wondered when you see form on some website submitted in a fraction of a second? Have you ever wanted such forms on your site?

This is it.

Let us take a sample form.
HTML Code:
<form method="post" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm"> 
	<table align="center" border="0"> 
		<tr><td>Name:</td><td><input type="text" name="name" value="" size="20"></td></tr> 
		<tr><td>Email:</td><td><input type="text" name="email" value="" size="20" id="email"></td></tr> 
		<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr> 
	</table> 
</form> 
Now we want this form to be submitted to an iframe. So let us add an iframe and target the form to the iframe.
HTML Code:
<iframe id="SomeFrameName" style="display: none" name="SomeFrameName" src="about:blank"></iframe> 
<form method="post" action="SubmitToSomeFile" target="SomeFrameName" id="frm" accept-charset=UTF-8 name="frm"> 
	<table align="center" border="0"> 
		<tr><td>Name:</td><td><input type="text" name="name" value="" size="20"></td></tr> 
		<tr><td>Email:</td><td><input type="text" name="email" value="" size="20" id="email"></td></tr> 
		<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></tr> 
	</table> 
</form> 
Now we want to show a success message to the user.
HTML Code:
<div id="before"> 
	<iframe id="SomeFrameName" style="display: none" name="SomeFrameName" src="about:blank"></iframe> 
	<form method="post" action="SubmitToSomeFile" target="SomeFrameName" id="frm" accept-charset=UTF-8 name="frm"> 
		<table align="center" border="0"> 
			<tr><td>Name:</td><td><input type="text" name="name" value="" size="20"></td></tr> 
			<tr><td>Email:</td><td><input type="text" name="email" value="" size="20" id="email"></td></tr> 
			<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit" onClick="_submit_form();"></td></tr> 
		</table> 
	</form> 
</div> 
<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div> 
And finally the Javascript to toggle the Div's
HTML Code:
<script language="JavaScript"> 
<!--
function _submit_form(){
	document.getElementById('before').style.display = 'none';
	document.getElementById('after').style.display = 'block';
	return true
}
//-->
</script> 
Finally the complete HTML.
HTML Code:
<html> 
<head> 
<title>Submit Form Demo</title> 
</head> 
 
<body> 
Some Content Before the form.
<div id="before"> 
	<iframe id="SomeFrameName" style="display: none" name="SomeFrameName" src="about:blank"></iframe> 
	<form method="post" action="SubmitToSomeFile" target="SomeFrameName" id="frm" accept-charset=UTF-8 name="frm"> 
		<table align="center" border="0"> 
			<tr><td>Name:</td><td><input type="text" name="name" value="" size="20"></td></tr> 
			<tr><td>Email:</td><td><input type="text" name="email" value="" size="20" id="email"></td></tr> 
			<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Submit" onClick="_submit_form();"></td></tr> 
		</table> 
	</form> 
</div> 
<div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div> 
Some Content After the form.
<script language="JavaScript"> 
<!--
function _submit_form(){
	document.getElementById('before').style.display = 'none';
	document.getElementById('after').style.display = 'block';
	return true
}
//-->
</script> 
 
</body> 
</html> 
See the complete working example here.

One of the disadvantage to the above working is when you have issue with data validation and so it has to be all done in JavaScript on client side.
0
lionaneesh's Avatar, Join Date: Mar 2010
Invasive contributor
Thanks for such great article...

Thanks a ton...
0
seoabhisek's Avatar
Banned
thanks for all this information
0
Ana_Campos's Avatar, Join Date: Jan 2011
Ambitious contributor
nice info; 10x and keep them coming
0
matrix4u's Avatar, Join Date: Sep 2011
Newbie Member
Wow, you guys are the bomb!
0
c_user's Avatar, Join Date: Aug 2009
Contributor
cool
thx