0

I am trying to change which dropdown menu is populated depending on which radio button I choose. The data for each dropdown menu is located in a different XML file. I am trying to use if-else statement to select which xml file i use, but after using alert(saddress);I discovered that changing the radio form does not even engage the else statement. Do any of you have an idea why?

Here is my JS `$(document).ready(function(){ $('input:radio[name="congresstype"]').change(function(){ if($('input[name="congresstype"]:checked','#usrform').val()==$('#SenatorCheck').val()){

$.ajax({ type: "GET", url: "senators_cfm.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function(){ $('#SenatorSelect').empty(); $('#HouseSelect').empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var SAD = $('#SenatorAddress'); select1.append('<option value="Select a senator">Select a Senator</option>'); $(xml).find('member').each(function(){ if(state == $(this).find('state').text()){ var fname = $(this).find('first_name').text(); var lname = $(this).find('last_name').text(); select1.append("<option>"+fname+"&nbsp"+lname+"</option>"); var saddress = $(this).find('address').text(); SAD.val(saddress); } }); }); } }); }else if($('input[name="congresstype"]:checked','#usrform').val()==$('#HouseCheck').val()) { $.ajax({ type: "GET", url: "MemberData.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function(){ $('#SenatorSelect').empty(); $('#HouseSelect').empty(); select1.empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var HAD = $('#HouseSelect'); HAD.append('<option value="Select a House Representative">Select a House Representative</option>'); $(xml).find('member-info').each(function(){ if(state == $(this).find('state postal-code').text()){ var name = $(this).find('official-name').text(); HAD.append(name); var saddress = $(this).find('address').text(); HAD.val(saddress); alert(saddress); } }); }); } });}

}); `

Here is my html: <input type="radio" id="SenatorCheck" name="congresstype" value="Scheck" checked>Senator <br> <input type="radio" id="HouseCheck" name="congresstype" value="Hcheck">House Representative

Lastly, here is the sample xml from the else statement code: <members> <member> <statedistrict>AK00</statedistrict> <member-info> <namelist>Young, Don</namelist> <bioguideID>Y000033</bioguideID> <lastname>Young</lastname> <firstname>Don</firstname> <middlename/> <sort-name>YOUNG,DON</sort-name> <suffix/> <courtesy>Mr.</courtesy> <prior-congress>113</prior-congress> <official-name>Don Young</official-name> <formal-name>Mr. Young of Alaska</formal-name> <party>R</party> <caucus>R</caucus> <state postal-code="AK"> <state-fullname>Alaska</state-fullname> </state> <district>At Large</district> <townname>Fort Yukon</townname> <office-building>RHOB</office-building> <office-room>2314</office-room> <office-zip>20515</office-zip> <office-zip-suffix>0200</office-zip-suffix> <phone>(202) 225-5765</phone> <elected-date date="20141104">November 4, 2014</elected-date> <sworn-date date="20150112">January 12, 2015</sworn-date> </member-info> <committee-assignments> <committee comcode="II00" rank="2"/> <committee comcode="PW00" rank="2"/> <subcommittee subcomcode="II10" rank="2"/> <subcommittee subcomcode="II13" rank="2"/> <subcommittee subcomcode="II24" rank="1" leadership="Chairman"/> <subcommittee subcomcode="PW05" rank="2"/> <subcommittee subcomcode="PW07" rank="2"/> <subcommittee subcomcode="PW12" rank="2"/> </committee-assignments>

$(document).ready(function() { $('.form').fadeIn(500); }); }); $(document).ready(function() { $('#StartButton').click(function() { $('.Step1').removeClass("Step1"); $('#class1').addClass("instructions"); $('#class1').removeClass('body'); $('#class1').removeClass('icon-menu'); }); }); $(document).ready(function() { $('#Step1Button').click(function() { $('.Step2').removeClass("Step2"); }); }); $(document).ready(function() { $('#Step2Button').click(function() { $('.Step3').removeClass("Step3"); }); }); $(document).ready(function() { $('input:radio[name="congresstype"]').change(function() { if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#SenatorCheck').val()) { $.ajax({ type: "GET", url: "senators_cfm.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function() { $('#SenatorSelect').empty(); $('#HouseSelect').empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var SAD = $('#SenatorAddress'); select1.append('<option value="Select a senator">Select a Senator</option>'); $(xml).find('member').each(function() { if (state == $(this).find('state').text()) { var fname = $(this).find('first_name').text(); var lname = $(this).find('last_name').text(); select1.append("<option>" + fname + "&nbsp" + lname + "</option>"); var saddress = $(this).find('address').text(); SAD.val(saddress); } }); }); } }); } else if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#HouseCheck').val()) { $.ajax({ type: "GET", url: "MemberData.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function() { $('#SenatorSelect').empty(); $('#HouseSelect').empty(); select1.empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var HAD = $('#HouseSelect'); HAD.append('<option value="Select a House Representative">Select a House Representative</option>'); $(xml).find('member-info').each(function() { if (state == $(this).find('state postal-code').text()) { var name = $(this).find('official-name').text(); HAD.append(name); var saddress = $(this).find('address').text(); HAD.val(saddress); } }); }); } }); } }); }); }); $(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="form.php" id="usrform" name="usrform" method="get" enctype="text/plain"> Name: <br> <input type="text" name="SenderName" value="Name" onfocus="if (this.value=='Name') this.value='';" /> <br>E-mail: <br> <input type="text" name="SenderEmail" value="Email Address" onfocus="if (this.value=='Email Address') this.value='';" /> <br />Address: <br> <input type="text" name="SenderAddress" value="Home Address" onfocus="if (this.value=='Home Address') this.value='';" /> <br />Title: <br> <input type="text" name="SenderTitle" value="Title" onfocus="if (this.value=='Title') this.value='';" /> <br />City: <br> <input type="text" name="SenderCity" value="City" onfocus="if (this.value=='Title') this.value='';" /> <br />Zipcode: <br> <input type="text" name="SenderZipcode" value="Zip" onfocus="if (this.value=='Title') this.value='';" /> <br />Phonenumber: <br> <input type="text" name="SenderPhonenumber" value="Phonenumber" onfocus="if (this.value=='Title') this.value='';" /> <br /> <input type="radio" id="SenatorCheck" name="congress-type" value="Scheck" checked>Senator <br> <input type="radio" id="HouseCheck" name="congress-type" value="Hcheck">House Representative <br /> <input type="hidden" id="SenatorAddress" name="SA" /> <input type="hidden" id="HouseAddress" name="HA" />Select Your State <select id="StateSelect" name="senatorstates" form="usrform"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> <br/>Choose a Senator <select id="SenatorSelect" name="senatornames" form="usrform"></select> <br /> <select id="HouseSelect" name="housenames" form="usrform"></select> <br />

Improve this question
3
  • You have to add an event handler for the change in radio buttons it won't just automatically pick up without it Commented Jul 1, 2015 at 5:58
  • So like, $('input:radio[name="postage"]').change(function(){ first if-statement...etc } Commented Jul 1, 2015 at 6:05
  • Why wouldn't it pick up though is my question. Isn't the value of that radio changing? Commented Jul 1, 2015 at 6:08

1 Answer 1

Reset to default
0

First you should make sure your radio buttons are in a group by having the same name..

<input type="radio" id="SenatorSelect" name="namesGroup" form="usrform" value="Senators"></select> <input type="radio" id="HouseSelect" name="namesGroup" form="usrform" value="Houses"></select> <input onclick= id="StartButton" name="Start" type="button" value="Begin!" />

You have to add an event handler for the change of option of the whole group using JQuery as:

$("input[name='namesGroup']").change(function(e){ if($(this).val() == 'Senators') { Do Ajax Request and Populate DropDowns } else { Do Other Ajax Post and Populate } }

Here's your document ready event handler..

$(document).ready(function(){ Do Ajax Call at start of page });

This Link has a good explanation

The reason is the browser has no way of knowing when to check for which input is checked unless you tell it when to check the value. The jQuery .change() function tells it to check the value everytime you change the radio button clicked

Your Complete Javascript would look similar to but not completely like:

$(document).ready(function() { $('.form').fadeIn(500); if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#SenatorCheck').val()) { $.ajax({ type: "GET", url: "senators_cfm.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function() { $('#SenatorSelect').empty(); $('#HouseSelect').empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var SAD = $('#SenatorAddress'); select1.append('<option value="Select a senator">Select a Senator</option>'); $(xml).find('member').each(function() { if (state == $(this).find('state').text()) { var fname = $(this).find('first_name').text(); var lname = $(this).find('last_name').text(); select1.append("<option>" + fname + "&nbsp" + lname + "</option>"); var saddress = $(this).find('address').text(); SAD.val(saddress); } }); }); } }); } else if ($('input[name="congresstype"]:checked', '#usrform').val() == $('#HouseCheck').val()) { $.ajax({ type: "GET", url: "MemberData.xml", dataType: "xml", success: function(xml) { $('#StateSelect').change(function() { $('#SenatorSelect').empty(); $('#HouseSelect').empty(); select1.empty(); var state = $(this).val(); var select1 = $('#SenatorSelect'); var HAD = $('#HouseSelect'); HAD.append('<option value="Select a House Representative">Select a House Representative</option>'); $(xml).find('member-info').each(function() { if (state == $(this).find('state postal-code').text()) { var name = $(this).find('official-name').text(); HAD.append(name); var saddress = $(this).find('address').text(); HAD.val(saddress); } }); }); } }); } }); $("input[name='congress-type']").change(function(e) { if ($(this).val() == 'Scheck') { alert('HI'); } else { alert('Coding is cool'); } }); $('#StartButton').click(function() { $('.Step1').removeClass("Step1"); $('#class1').addClass("instructions"); $('#class1').removeClass('body'); $('#class1').removeClass('icon-menu'); }); $('#Step1Button').click(function() { $('.Step2').removeClass("Step2"); }); $('#Step2Button').click(function() { $('.Step3').removeClass("Step3"); }); $(document).ready(main);

I only used Document Ready once, at the start it will look for which one is checked and do whatever actions and methods you tell it. Then outside of the document ready I add my event handlers, the browser will still pick them up

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

That makes a lot of sense! sorry I gave the wrong HTML. It is now updated.
However, after I added the handler, both of the drop-boxes refuse to be populated. Before I added it, the first one was.
Yes you still need your document ready function so it knows what to do hen the page first loads...the change will only fire when you click the radio buttons
Sorry the document ready function got cut out from the grey box, it's still in normal formatting.
How does your javascript look now
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.