CODEWITHSUNDEEP
jquery
AJSwift
AJSwift

Reputation: 719

Pass radiobutton selection or dropdown selection to querystring in URL

I have two columns of radio buttons and a dropdown for additional selection. Both controls are choices for the same Item like "specialty" in this example..how do I get the selected value from radio buttons if one of the radio buttons from either the left column or right column is selected or the dropdown selection if the dropdown is selected and pass that selection as a querystring to an URL?? so if Cardiologist is selected from radio buttons, i would like to pass it to the url as

/search/pages/physicians.aspx?v=relevance&s=Physicians&k=Cardiologist

or if number1 is selected from the dropdown, then to the url is appended 

/search/pages/physicians.aspx?v=relevance&s=Physicians&k=number1

How to do so in jquery?

<div class="Specialty-Choices"><span class="Choices-Title">Choose a Specialty</span><br /><br />
 <div class="radioHolder">
    <div class="radioCol-left">
        <div class="radioRow"><input name="speciality_type" type="radio" value="Cardiologist"/> <label>Cardiologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Dermatologist"/> <label>Dermatologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Family Physician"/> <label>Family Physician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Gastroenterologist"/> <label>Gastroenterologist</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Neurologist"/> <label>Neurologist</label> </div>
    </div>
    <div class="radioCol-right">
        <div class="radioRow"><input name="speciality_type" type="radio" value="Obstetrician"/> <label>Obstetrician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Orthopedic Surgeon"/> <label>Orthopedic Surgeon</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Pediatrician"/> <label>Pediatrician</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Primary Care Doctor"/> <label>Primary Care Doctor</label> </div>
        <div class="radioRow"><input name="speciality_type" type="radio" value="Psychiatrist"/> <label>Psychiatrist</label> </div>
    </div>
  </div><br />
  <div class="mainPaneRow clearfix"><span class="inp"><select id="landing_physician_specialty"> <option  disabled="disabled" selected="selected">Select other specialty</option> <option>--number-1--</option> <option>--number-2--</option> <option>--number-3--</option></select> </span></div>
  <div class="mainPaneRow clearfix"><div class="submitBox"><a class="btnBlue" href="#" type="submit"><span><em class="searchElem">Search</em></span></a> <a class="paneBoxLink" href="/physicians/">Advanced Search</a> </div></div>
</div><!--END Specialty-Choices-->

Upvotes: 2

Views: 1481

Answers (1)

Adam Rackis
Adam Rackis

Reputation: 83366

To get the selected radio button:

var selectedDoctorType = $("input[name='speciality_type']:checked").val();

To get the selected dropdown value:

var selectedNum = $("#landing_physician_specialty").val();

Getting them into a url should just be a matter of doing some string concatenating 

var baseUrl = "search/pages/physicians.aspx?v=relevance&";

if (selectedDoctorType)
    baseUrl += "s=" + selectedDoctorType + "&"; 
if (selectedNum)
    baseUrl += "v=" + selectedNum;

Note that the potentially trailing amersand in my solution is perfectly valid

Upvotes: 3

Related Questions