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)

Here is the main page from which we call other pages.

<!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>

download the file

The left frame (fillform.html)

We send data from this page.

<!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>

download the file

The main frame (theform.html)

The form is here.

<!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>

download the file

Simply change the data according to your needs and the form.

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Filling a form through a frame

Filling a form through a frame

Webmaster Corner

Categories