Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Instantly Submit HTML Form Using IFrame and JavaScript (http://www.go4expert.com/articles/instantly-submit-html-form-using-iframe-t24570/)

shabbir 17Jan2011 10:34

Instantly Submit HTML Form Using IFrame and JavaScript
 
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.

lionaneesh 31Jan2011 21:07

Re: Instantly Submit HTML Form Using IFrame and JavaScript
 
Thanks for such great article...

Thanks a ton...

seoabhisek 1Feb2011 12:25

Re: Instantly Submit HTML Form Using IFrame and JavaScript
 
thanks for all this information

Ana_Campos 10Mar2011 15:47

Re: Instantly Submit HTML Form Using IFrame and JavaScript
 
nice info; 10x and keep them coming

matrix4u 20Jul2012 17:13

Re: Instantly Submit HTML Form Using IFrame and JavaScript
 
Wow, you guys are the bomb!

c_user 7Feb2013 13:19

Re: Instantly Submit HTML Form Using IFrame and JavaScript
 
cool
thx


All times are GMT +5.5. The time now is 14:43.