Javascript - Filling a form through a frame

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

The index page (formframe.html):
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A frame with form and function to fill it from the left</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> </head> <frameset cols="20%,*"> <frame src="fillform.html" name="fillform"> <frame src="theform.html" name="theform"> <noframes> <h1>No frame!</h1> the browser does not render frames... </noframes> </frameset> </html>

The left frame (fillform.html):
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> function filltheform() { parent.theform.document.postform.email.value='myemail@mydomain.com'; parent.theform.document.postform.login.value='login name'; parent.theform.document.postform.details.value='comments... text'; } </script> </head> <body> Click this button to fill the form on the right frame: <p> <input type="button" onclick="javascript:filltheform();" value="Fill it" /> </p> </body> </html>

The main frame (theform.html):
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>A form to fill</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> </head> <body> <h1>the form to fill</h1> <form method="post" action="#" name="postform"> Email:<br /> <input type="text" name="email" /><br /> Login:<br /> <input type="text" name="login" /><br /> Details:<br /> <textarea name="details" rows="10" cols="40"></textarea> <br /> <input type="submit" value="Submit" /><br /> </form> </body> </html>

Note: simply change the data according to your needs and the form.

Comments

Post the first comment now
or discuss about it at this address:
Forum - Javascript

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - Filling a form through a frame

Javascript - Filling a form through a frame

Comments

Webmaster Corner

Categories