Iframe to load on submit

**triad** · 02-18-2009, 12:18 PM

Hey guys

I am trying to load a specific page into an iframe using a form submit button,
I have had this working before so I know it can be done but I can't remember how I did it.

here is my code

Code:

<form method="get" action="javascript:loadintoIframe('myframe', 'http://www.google.com')">

any pointers would be much appreciated

**codeexploiter** · 02-18-2009, 12:33 PM

The following one works on a button click (not a submit button). Enter the url in the text box and press the button and also please note that at the moment the script doesn't offer any validation on the URL or ID,etc.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			function loadintoIframe(info) {
				if (typeof info.id !== 'undefined' && typeof info.src !== 'undefined') {
					document.getElementById(info.id).src = info.src;
					
				}
			}			
			window.onload = function(){
				document.forms['f'].elements['b'].onclick = function(){
					loadintoIframe({id:"myiframe",src:document.forms['f'].elements['u'].value});
				}
			}
		</script>
	</head>
	<body>
		<form name="f">
			<input type="text" name="u" value=""/>
			<input type="button" name="b" value="load"/>
		</form>
		<iframe id="myiframe" frameborder="0" height="1000" width="1300"></iframe>
	</body>
</html>

The iframe height and width has been specified statically here.

**jscheuer1** · 02-19-2009, 07:34 AM

No javascript required, and with Google you can even pass search terms:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<iframe src="about:blank" name="myFrame" width="600" height="350" scrolling="auto" frameborder="1"></iframe>
<form action="http://www.google.com/search" target="myFrame">
Search: <input type="text" name="q"><br>
<input type="submit" value="Go!">
</form>
</body>
</html>

**yampire** · 06-19-2012, 04:00 PM

Originally Posted by jscheuer1

No javascript required, and with Google you can even pass search terms:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<iframe src="about:blank" name="myFrame" width="600" height="350" scrolling="auto" frameborder="1"></iframe>
<form action="http://www.google.com/search" target="myFrame">
Search: <input type="text" name="q"><br>
<input type="submit" value="Go!">
</form>
</body>
</html>

Thanks I tried this code and it works for me. I just want that if the iframe window remain hidden at first and when i click go it should appears. Could you make the code work like that plzz.
Sorry for my bad english and I am waiting for reply

**bernie1227** · 06-19-2012, 11:55 PM

Originally Posted by yampire

Thanks I tried this code and it works for me. I just want that if the iframe window remain hidden at first and when i click go it should appears. Could you make the code work like that plzz.
Sorry for my bad english and I am waiting for reply

Hiya yampire! Welcome to the forums! I believe this is the solution to your problem.

Code:

<html>
<head>
<title>(Type a title for your page here)</title>

<script language="JavaScript">
function setVisibility(div, visibility) {
document.getElementById(div).style.display = visibility;
}
</script>

</head>
<body >

<div id="sub3">
<iframe src="about:blank" name="myFrame" width="600" height="350" scrolling="auto" frameborder="1" onload="setVisibility('sub3', 'none');"; ></iframe>
</div>
<form action="http://www.google.com/search" target="myFrame">
Search: <input type="text" name="q"><br>
<input type="submit" value="Go!" name=type onclick="setVisibility('sub3', 'inline');";>
</form>
</body>
</html>

Bernie

**keyboard** · 06-20-2012, 12:55 AM

The code above works, but this is a little bit better (should work if javascript is disabled (it'll just show the iframe), if the website doesn't allow iframes, it wont hide the iframe)

Code:

<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function setVisibility() {
	document.getElementById('iframe1').style.display = "block";
}
</script>
<style type="text/css">
#iframe1 {
	display:none;
}
</style>
<noscript>
<style type="text/css">
#iframe1 {
	display:block;
}
</style>
</noscript>
</head>
<body>
<iframe src="about:blank" name="myFrame" width="600" height="350" scrolling="auto" frameborder="1" id="iframe1"></iframe>
<form action="http://www.google.com/search" target="myFrame">
Search: <input type="text" name="q"><br>
<input type="submit" value="Go!" name="type" onclick="setVisibility();">
</form>
</body>
</html>

Thread: Iframe to load on submit

Thread Tools

Search Thread

Iframe to load on submit

Bookmarks

Bookmarks

Posting Permissions