Radio form, XML file parsing, and Jquery

Question

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

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

score 0 · Accepted Answer · edited May 23 '17 at 11:43

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

That makes a lot of sense! sorry I gave the wrong HTML. It is now updated. — mousadafousa, Jul 01 '15 at 06:27
However, after I added the handler, both of the drop-boxes refuse to be populated. Before I added it, the first one was. — mousadafousa, Jul 01 '15 at 06:29
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 — code, Jul 01 '15 at 06:30
Sorry the document ready function got cut out from the grey box, it's still in normal formatting. — mousadafousa, Jul 01 '15 at 06:34
Hi I made a codepen for you to look at, you only need to call document ready once. Every function that needs to run at page start-up can reside in there. Also you do not need to put your change functions inside the document ready function. Look at this [CodePen](http://codepen.io/anon/pen/GJQNjw) — code, Jul 01 '15 at 15:21
Sorry for taking so long to respond. Thank you immensely for helping me. I just started picking this up a week ago, and it is exchanges like this that help me learn more. — mousadafousa, Jul 10 '15 at 05:21

Radio form, XML file parsing, and Jquery

1 Answers1