PDA

Click to See Complete Forum and Search --> : form -> type=image button problem!

starflyer
07-22-2003, 03:13 PM
hello. i'm creating a simple keyword redirect using a html form and an external javascript file. when a user types a keyword into the input box, it calls on the javascript and redirects the browser to the corresponding url. example using the sample code at the bottom of this post: if the user types "test" into the input box and clicks the go button, then www.google.com should load in his/her browser.

the problem is that the input type="image" button does not work. it just reloads the original page. if i replace it with type="button", it works. i want to use an image type instead of a button, though. what can i modify to make this work?

html code:
----------------------------------------------
<form name="keywordForm" action="" method="Get">
<td width="125" height="21" align="center" bgcolor="#ffffff">
<input name="keywordBox" type="text" class="inputbox" value="" size="30">
</td>
<td background="images/go_back.gif">
<input type="image" src="images/go_b.gif" width="60" height="21" border="0" name="keyword" value="go" onClick="result(this.form)">
</td>
</form>
----------------------------------------------

javascript code:
----------------------------------------------
function result (form) {
var keyword = form.keywordBox;
if (keyword == "test") {
window.location="http://www.google.com"
}
else if (keyword == "test2"||"test2a"||"test2b") {
window.location="http://www.url.com"
}
else if (keyword == "test3") {
window.location="http://www.url.com"
}
else {
window.location="http://www.url.com"
}
}
----------------------------------------------

thanks!
Khalid Ali
07-22-2003, 03:19 PM
Change this line

var keyword = form.keywordBox;

to

var keyword = form.keywordBox.value

and a very important thing you must always do is "Do not name variables the same name as html elements name"
in the function above you using form as form name which might cuase un predictable problems..always make sure that you do not use anything like that
starflyer
07-22-2003, 03:48 PM
thanks for the quick reply khalid.

i tried changing "var keyword = form.keywordBox.value" as recommended, but it did not work. it still reloads the original page when clicked. also, i tried changing "form" to a different name and that didn't do the trick either...

just to make sure all the javascript worked, i replaced: input type="image" with: input type="button"...and the redirect worked fine. so, i'm still confused to why it does not like to work with type="image"
Khalid Ali
07-22-2003, 04:05 PM
Here you go...


<script type="text/javascript">
<!--
function result (frm) {
var keyword = frm.keywordBox.value;

if (keyword == "test") {
window.location.href="http://www.google.com";
}else if (keyword == "test2"||"test2a"||"test2b") {
window.location="http://www.url.com";
}else if (keyword == "test3") {
window.location="http://www.url.com";
}else {
window.location="http://www.url.com";
}
return false;
}
//-->
</script>
</head>

<body class="body">
<form name="keywordForm" action="" method="Get">
<td width="125" height="21" align="center" bgcolor="#ffffff">
<input name="keywordBox" type="text" class="inputbox" value="" size="30">
</td>
<td background="images/go_back.gif">
<input type="image" src="images/go_b.gif" width="60" height="21" border="0" name="keyword" value="go" onClick="return result(this.form)">
</td>
</form>
starflyer
07-22-2003, 04:14 PM
that did it! thanks for the help!
Khalid Ali
07-22-2003, 04:35 PM
:) you are most welcome :)