Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    WInchester, Hampshire. UK
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Using JS to redirect form select (no submit)

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    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>

  • Users who have thanked sunfighter for this post:

    sblatch (11-20-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Location
    WInchester, Hampshire. UK
    Posts
    12
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Sunfighter!

    Simple and perfect!

    :-)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •