Forum Moderators: open
(Sorry for my bad english)
I am working on a website, where i have created a form with an input field, and an Inline Frame. What i want is to make the location of the Inline Frame depend on what you have written in the input field, but it doesn't work.. Can anyone help me here?
This is my code:
<form name="form" action="#" onsubmit="I1.location = this.input.value + '.html'; return false">
<p>
<input type="text" size="15" name="input1">
</p>
<p>
<input type="submit" value="Submit" onclick="I1.location = this.input.value + '.html'; return false">
</p>
<iframe id=I1 width="800" height="300"></iframe>
</form>
<input type="submit" value="Submit" onclick="window.frames['I1'].src = this.input.value + '.html'; return false">
Welcome to the forum.
<input type="submit" value="Submit" onclick="window.frames['I1'].src = this.value + '.html'; return false">
What i want is to make the location of the Inline Frame depend on what you have written in the input field, but it doesn't work..
<input type="text" size="15" name="input1">
<input type="submit" value="Submit" onclick="I1.location = this.input.value + '.html'; return false">
You have three problems. First, you are asking for a value from the field input and your field name is input1. Second, the this keyword refers to whatever object it's in, which is the submit button, not the form. Third, DaveVK is correct, you reference an iFrame by (id).src, not location.
Also, you should quote all your attributes and remove spaces, and use ID's instead of deprecated names for DOM elements. This will help debug and validate your pages. working code, which will also of course fail if the files don't exist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function() {
if (document.getElementById) {
document.getElementById('myForm').onsubmit = function() { return processForm(); }
}
}
function processForm() {
if (document.getElementById) {
if (document.getElementById('input1').value=='') { alert('Enter a file name.'); }
else { document.getElementById('I1').src = document.getElementById('input1').value + '.html'; }
return false;
}
}
</script>
</head>
<body>
<form name="myForm" id="myForm" action="#">
<p><input type="text" size="15" name="input1" id="input1" value=""></p>
<p><input type="submit" value="Submit"></p>
<iframe id="I1" width="800" height="300"></iframe>
</form>
</body>
</html>
