Using JS to redirect form select (no submit)

sblatch

11-15-2012, 01:52 PM

I want to have a selection of form elements:

<form action="" method="post" enctype="multipart/form-data" name="mps_service" target="_top" dir="ltr" lang="en">
<select name="service" id="service">
<option value="buy">Buy a Home</option>
<option value="rent">Rent a Home</option>
<option value="sell">Sell a property</option>
</select>
</form>

Which then redirect to a relevant page once clicked. I do not want a submit button or to use a css menu as I want to be in the default form browser style to match other elements.

I have tried using the following in the <head>

<script type="text/javascript" language="javascript">
function redirectbuy()
{
document.location.href="http://www.buy-site.com"
}
function redirectrent()
{
document.location.href="http://www.rent-site.com"
}
function redirectsell()
{
document.location.href="http://www.sell-site.com"
}
</script>

and then changing the form code to:

<form action="" method="post" enctype="multipart/form-data" name="mps_service" target="_top" dir="ltr" lang="en">
<select name="service" id="service">
<option type onselect="redirectbuy()">Buy a Home</option>
<option type onselect="redirectrent()">Rent a Home</option>
<option type onselect="redirectsell()">Sell a property</option>
</select>
</form>

I am a total newbie and any guidance would really be appreciated.

sunfighter

11-15-2012, 06:15 PM

<!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 travel()
{
var locationObj = document.location;
if(document.getElementById("service").value == "buy") document.location = 'http://www.mozilla.org';
if(document.getElementById("service").value == "rent") document.location = 'http://www.yahoo.org';
if(document.getElementById("service").value == "sell") document.location = 'http://www.google.org';
}
</script>
</head>

<body>
Your Choice Buy, Rent, or Sell<br />
<select name="service" id="service" onchange="travel()">
<option></option>
<option value="buy">Buy a Home</option>
<option value="rent">Rent a Home</option>
<option value="sell">Sell a property</option>
</select>
</body>
</html>

sblatch

11-20-2012, 07:23 AM

Thanks Sunfighter!

Simple and perfect!

:-)