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.
Now we want this form to be submitted to an iframe. So let us add an iframe and target the form to the iframe.
Now we want to show a success message to the user.
And finally the Javascript to toggle the Div's
Finally the complete 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.
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>
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>
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>
HTML Code:
<script language="JavaScript"> <!-- function _submit_form(){ document.getElementById('before').style.display = 'none'; document.getElementById('after').style.display = 'block'; return true } //--> </script>
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>
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.
