How to Link to a Selected Drop-Down Item to Open a Web Page

Question

I am trying to create a form which has city and social networking filter. I want to capture both the city and social networking value as i want to store the value and i want my form to redirect to social networking site on submit button. Suppose if i choose facebook, i want facebook homepage to open on submit button. My page is not getting redirected. here is my code

 <script type="text/javascript"> function actionDef() { var option_selected = $('purposeId').value(); console.log = option_selected; if( option_selected=="gl" ) { document.getElementById("search-form").action = "https://www.google.co.in/"; } else if( option_selected=="y" ) { document.getElementById("search-form").action = "https://in.yahoo.com/?p=us"; } else if( option_selected=="fb" ) { document.getElementById("search-form").action = "http://www.facebook.com/"; } } </script> 

  <form action="/" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical"> <div class="city"> <label for="cityId" class="required">Enter your city</label> <select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city"> <option value="9">Bangalore</option> <option value="20">Chennai</option> <option value="27">Faridabad</option> <option value="28">Ghaziabad</option> <option value="32">Gurgaon</option> <option value="36">Howrah</option> <option value="38">Hyderabad</option> <option value="49">Kolkata</option> <option value="57">Mumbai</option> <option value="61">Navi Mumbai</option> <option value="63" selected="selected">New Delhi</option> <option value="89">Noida</option> <option value="70">Pune</option> <option value="76">Secunderabad</option> <option value="79">Thane</option> <option value="92">Agra</option> <option value="1">Ahmedabad</option> <option value="208">Ahmednagar</option> <option value="93">Ajmer</option> <option value="2">Akola</option> <option value="295">Alappuzha</option> <option value="209">Aligarh</option> <option value="3">Allahabad</option> <option value="140">Alleppey</option> <option value="294">Aluva</option> <option value="4">Alwar</option> <option value="94">Ambala</option> <option value="141">Amravati</option> <option value="5">Amritsar</option> <option value="6">Anand</option> <option value="112">Anantapur</option> <option value="255">Anantnag</option> <option value="7">Ankleshwar</option> <option value="210">Arakkonam</option> <option value="256">Asansol</option> <option value="8">Aurangabad</option> <option value="297">Avadi</option> <option value="211">Baddi</option> <option value="302">Bagalkot</option> <option value="9">Bangalore</option> <option value="142">Bardoli</option> <option value="10">Bareilly</option> <option value="212">Barkathpura</option> <option value="11">Baroda</option> <option value="213">Batala</option> <option value="214">Beawar</option> <option value="12">Belgaum</option> <option value="113">Bellary</option> <option value="267">Berhampur</option> <option value="13">Bharuch</option> <option value="91">Bhatinda</option> <option value="143">Bhavnagar</option> <option value="257">Bhilai</option> <option value="17">Bhilwara</option> <option value="215">Bhimavaram</option> <option value="144">Bhiwandi</option> <option value="14">Bhopal</option> <option value="15">Bhubaneshwar</option> <option value="145">Bhuj</option> <option value="288">Bidar</option> <option value="301">Bijapur</option> <option value="16">Bikaner</option> <option value="216">Bilaspur</option> <option value="146">Boisar</option> <option value="258">Bokaro</option> <option value="18">Calicut</option> <option value="19">Chandigarh</option> <option value="217">Chandrapur</option> <option value="147">Changanacherry</option> <option value="275">Chankheda</option> <option value="20">Chennai</option> <option value="96">Chidambaram</option> <option value="290">Chitradurga</option> <option value="300">Chokodi</option> <option value="21">Cochin</option> <option value="22">Coimbatore</option> <option value="148">Cuddalore</option> <option value="23">Cuttack</option> <option value="149">Dahanu</option> <option value="150">Dahej</option> <option value="151">Daman</option> <option value="273">Dausa</option> <option value="152">Davangere</option> <option value="105">Dehradun</option> <option value="24">Delhi</option> <option value="218">Derabassi</option> <option value="25">Dewas</option> <option value="95">Dhanbad</option> <option value="97">Dharwad</option> <option value="26">Dhule</option> <option value="219">Dindigul</option> <option value="220">Durg</option> <option value="153">Durgapur</option> <option value="98">Eluru</option> <option value="106">Ernakulam</option> <option value="99">Erode</option> <option value="221">Faizabad</option> <option value="27">Faridabad</option> <option value="222">Firozabad</option> <option value="154">Gandhidham</option> <option value="253">Gandhinagar</option> <option value="107">Gangtok</option> <option value="28">Ghaziabad</option> <option value="29">Goa</option> <option value="299">Gokak</option> <option value="259">Gorakhpur</option> <option value="30">Gulbarga</option> <option value="31">Guntur</option> <option value="32">Gurgaon</option> <option value="114">Guwahati</option> <option value="33">Gwalior</option> <option value="108">Haldwani</option> <option value="223">Hapur</option> <option value="155">Haridwar</option> <option value="289">Harpanahalli</option> <option value="129">Hassan</option> <option value="287">Haveri</option> <option value="264">Hazirabagh</option> <option value="34">Himmatnagar</option> <option value="109">Hissar</option> <option value="156">Hoshiarpur</option> <option value="157">Hospet</option> <option value="35">Hosur</option> <option value="36">Howrah</option> <option value="37">Hubli</option> <option value="38">Hyderabad</option> <option value="293">Idukki</option> <option value="39">Indore</option> <option value="40">Jabalpur</option> <option value="41">Jaipur</option> <option value="45">Jalandhar</option> <option value="131">Jalgaon</option> <option value="224">Jalna</option> <option value="260">Jammu</option> <option value="42">Jamnagar</option> <option value="43">Jamshedpur</option> <option value="225">Jhansi</option> <option value="44">Jodhpur</option> <option value="46">Junagadh</option> <option value="284">Kadappa</option> <option value="110">Kakinada</option> <option value="158">Kalka</option> <option value="279">Kallakurichi</option> <option value="159">Kalyan</option> <option value="160">Kancheepuran</option> <option value="100">Kankroli</option> <option value="161">Kannur</option> <option value="47">Kanpur</option> <option value="132">Kanyakumari</option> <option value="162">Kapurthala</option> <option value="163">Karad</option> <option value="164">Karaikudi</option> <option value="226">Karimnagar</option> <option value="111">Karnal</option> <option value="165">Karur</option> <option value="286">Karwar</option> <option value="283">Kasaragode</option> <option value="227">Katni</option> <option value="228">Khammam</option> <option value="266">Khandwa</option> <option value="166">Khanna</option> <option value="265">Khargone</option> <option value="305">Kolar</option> <option value="48">Kolhapur</option> <option value="49">Kolkata</option> <option value="167">Kollam</option> <option value="50">Kota</option> <option value="90">Kottayam</option> <option value="168">Kovilatti</option> <option value="115">Kozhikode</option> <option value="169">Kumbakonam</option> <option value="116">Kurnool</option> <option value="170">Kurukshetra</option> <option value="136">Lathur</option> <option value="51">Lucknow</option> <option value="52">Ludhiana</option> <option value="53">Madurai</option> <option value="254">Mahabubnagar</option> <option value="54">Mahad</option> <option value="278">Malappuram</option> <option value="282">Mandya</option> <option value="55">Mangalore</option> <option value="139">Mangan</option> <option value="101">Manipal</option> <option value="171">Manjeri</option> <option value="130">Mansarovar</option> <option value="172">Mapusa</option> <option value="229">Mathura</option> <option value="292">Mavelikara</option> <option value="173">Meerut</option> <option value="56">Mehsana</option> <option value="174">Moga</option> <option value="137">Mohali</option> <option value="175">Morvi</option> <option value="298">Mudhol</option> <option value="57">Mumbai</option> <option value="58">Mysore</option> <option value="176">Nabha</option> <option value="177">Nadiad</option> <option value="117">Nagercoil</option> <option value="59">Nagpur</option> <option value="230">Nanded</option> <option value="231">Nandyal</option> <option value="277">Narsipatnam</option> <option value="60">Nashik</option> <option value="61">Navi Mumbai</option> <option value="178">Navsari</option> <option value="304">Neelamangala</option> <option value="62">Nellore</option> <option value="63">New Delhi</option> <option value="232">Nizamabad</option> <option value="89">Noida</option> <option value="274">Nokha</option> <option value="233">Ongole</option> <option value="179">Palakkad</option> <option value="261">Palanpur</option> <option value="268">Palghar</option> <option value="234">Pali</option> <option value="138">Panchkulla</option> <option value="180">Panipat</option> <option value="181">Panjim</option> <option value="64">Panvel</option> <option value="235">Parbhani</option> <option value="182">Patalganga</option> <option value="183">Pathanamthitta</option> <option value="236">Pathankot</option> <option value="65">Patiala</option> <option value="66">Patna</option> <option value="67">Pen</option> <option value="184">Phagwara</option> <option value="68">Pithampur</option> <option value="185">Pollachi</option> <option value="186">Ponda</option> <option value="102">Pondichery</option> <option value="69">Porbunder</option> <option value="296">Poruru</option> <option value="187">Porvorim</option> <option value="188">Pudukottai</option> <option value="70">Pune</option> <option value="237">Raichur</option> <option value="238">Raigarh</option> <option value="71">Raipur</option> <option value="72">Rajkot</option> <option value="73">Rajmundry</option> <option value="239">Rajnandgaon</option> <option value="189">Rajpura</option> <option value="74">Ranchi</option> <option value="240">Ranipet</option> <option value="75">Ratlam</option> <option value="133">Ratnagiri</option> <option value="190">Rewari</option> <option value="241">Rohtak</option> <option value="191">Ropar</option> <option value="118">Rourkela</option> <option value="192">Rudrapur</option> <option value="242">Saharanpur</option> <option value="103">Salem</option> <option value="285">Sangareddy</option> <option value="134">Sangli</option> <option value="193">Sangrur</option> <option value="135">Satara</option> <option value="76">Secunderabad</option> <option value="119">Shimla</option> <option value="243">Shimoga</option> <option value="262">Sikar</option> <option value="120">Silchar</option> <option value="121">Siliguri</option> <option value="77">Silvassa</option> <option value="244">Sirsa</option> <option value="245">Sitapur</option> <option value="194">Sivakasi</option> <option value="195">Sohana</option> <option value="246">Solan</option> <option value="196">Solapur</option> <option value="197">Sonepat</option> <option value="247">Sri Ganganagar</option> <option value="248">Srikakulam</option> <option value="263">Srinagar</option> <option value="78">Surat</option> <option value="269">Swargate</option> <option value="249">Tadepalligudem</option> <!--<option value="250">Tamilnadu</option> --> <option value="122">Tanjore</option> <option value="79">Thane</option> <option value="198">Thanjavur</option> <option value="281">Theni</option> <option value="123">Thiruvananthapuram</option> <option value="280">Thiruvannamalai</option> <option value="291">Thripunithura</option> <option value="124">Thrissur</option> <option value="125">Tirunelveli</option> <option value="126">Tirupathi</option> <option value="251">Tirupur</option> <option value="199">Tiruvalla</option> <option value="272">Tonk</option> <option value="104">Trichur</option> <option value="80">Trichy</option> <option value="81">Trivandrum</option> <option value="200">Tumkur</option> <option value="82">Udaipur</option> <option value="201">Udupi</option> <option value="83">Ujjain</option> <option value="202">Unjha</option> <option value="84">Valsad</option> <option value="85">Vapi</option> <option value="86">Varanasi</option> <option value="276">Vastral</option> <option value="127">Vellore</option> <option value="203">Veraval</option> <option value="87">Vijayawada</option> <option value="204">Villupuram</option> <option value="205">Virudhachalam</option> <option value="206">Virudhunagar</option> <option value="88">Vizag</option> <option value="128">Warangal</option> <option value="271">Wardha</option> <option value="252">Yamunanagar</option> <option value="270">Yavatmal</option> <option value="303">Yelanka</option> <option value="207">Zirakpur</option> </select> <span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> <div class="purpose"> <label for="purposeId" class="required">Enter Type</label> <select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type" onChange="actionDef()"> <option value="select_purpose" selected="selected">Selelct Type</option> <option value="1" id="gl">Google</option> <option value="2" id="y">Yahoo</option> <option value="3" id="fb">Facebook</option> </select> <span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span> </div> <div class="show-ofr"> <input type="submit" name="button" class="btn btn-primary btn-block"> </div> </form> 

Answer 1

try the below code, the problem is the way you process your value from select field.

JavaScript

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      jQuery(function($) {
        // bind change event to select
        $('#purposeId').on('change', function() {
          var url = $(this).val(); // get selected value
          alert(url);
          if (url == "1") {
            document.getElementById("search-form").action = "https://www.google.co.in/";
          } else if (url == "2") {
            document.getElementById("search-form").action = "https://in.yahoo.com/?p=us";
          } else if (url == "3") {
            document.getElementById("search-form").action = "http://www.facebook.com/";
          }
        });
      });
    </script>

HTML

<form action="" name="search-form" id="search-form" method="get" accept-charset="UTF-8" class="form-vertical">
      <div class="city">
        <label for="cityId" class="required">Enter your city</label>
        <select id="cityId" name="cityId" data-prefill="location.cityId" class="form-control" placeholder="Enter a city">
          <option value="88">Vizag</option>
          <option value="128">Warangal</option>
          <option value="271">Wardha</option>
          <option value="252">Yamunanagar</option>
          <option value="270">Yavatmal</option>
          <option value="303">Yelanka</option>
          <option value="207">Zirakpur</option>
        </select>
        <span id="city-not-selected-error" class="help-inline"></span> 
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </div>
      <div class="purpose">
        <label for="purposeId" class="required">Enter Type</label>
        <select id="purposeId" name="purposeId" class="form-control" placeholder="Selelct Type">
          <option value="select_purpose" selected="selected">Selelct Type</option>
          <option value="1" id="gl">Google</option>
          <option value="2" id="y">Yahoo</option>
          <option value="3" id="fb">Facebook</option>
        </select>
        <span id="city-not-selected-error" class="help-inline"> </span> <i class="fa fa-angle-down" aria-hidden="true"></i> <span id="purpose-not-selected-error" class="help-inline"> </span>
      </div>
      <div class="show-ofr">
        <input type="submit" name="button" class="btn btn-primary btn-block">
      </div>
    </form>