Using JS to redirect form select (no submit)

sblatch · 11-15-2012, 01:52 PM

I want to have a selection of form elements:

Code:

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

Code:

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

Code:

<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

Code:

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

:-)