Log in

View Full Version : 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




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


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


<!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
No javascript required, and with Google you can even pass search terms:


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



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



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