1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Instantly Submit HTML Form Using IFrame and JavaScript

Discussion in 'JavaScript and AJAX' started by shabbir, Jan 17, 2011.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,285
    Likes Received:
    364
    Trophy Points:
    83
    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:
    <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:
    <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:
    <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:
    <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:
    <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.
     
  2. lionaneesh

    lionaneesh Active Member

    Joined:
    Mar 21, 2010
    Messages:
    848
    Likes Received:
    224
    Trophy Points:
    43
    Occupation:
    Student
    Location:
    India
    Thanks for such great article...

    Thanks a ton...
     
  3. seoabhisek

    seoabhisek Banned

    Joined:
    Jan 22, 2011
    Messages:
    24
    Likes Received:
    1
    Trophy Points:
    0
    thanks for all this information
     
  4. Ana_Campos

    Ana_Campos New Member

    Joined:
    Jan 31, 2011
    Messages:
    145
    Likes Received:
    0
    Trophy Points:
    0
    nice info; 10x and keep them coming
     
  5. matrix4u

    matrix4u New Member

    Joined:
    Sep 3, 2011
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    0
    Wow, you guys are the bomb!
     
  6. c_user

    c_user New Member

    Joined:
    Aug 23, 2009
    Messages:
    86
    Likes Received:
    8
    Trophy Points:
    0
    Occupation:
    Php dev
    Location:
    Bhubaneswar

Share This Page