title: JQuery: alert not working properly
body: <p>I have a dialog box made through JQuery like this </p>
  
  <pre><code>    &lt;div class ="editable" id="div_David L. Kirp[instructor_status]"contenteditable="1"&gt;
          &lt;span class="text-error"&gt;Error: More than one user with same fname and lname&lt;/span&lt;br/&gt;
              Users:&lt;br/&gt;
          &lt;span class="multiple-users"&gt;
                  &amp;nbsp[CLICK HERE] Instructor ID: 65, Common Name: David Kirp&lt;/span&lt;br/&gt;  
          &lt;span class="multiple-users"&gt;
                  &amp;nbsp[CLICK HERE] Instructor ID: 17210, Common Name: David L. Kirp&lt;/span&gt;&lt;br/&gt;&lt;div class="update-dialog" title="Update Common Name"&gt;Which instructor do you want to update?&lt;p&gt;&lt;input type="radio" id="instructor_65" name="instructor" value="65"/&gt;&lt;label for="instructor_65"&gt;        
                  Instructor ID: 65, Common Name: David Kirp
              &lt;/label&gt;&lt;/p&gt;
              &lt;p&gt;&lt;input type="radio" id="instructor_17210" name="instructor" value="17210"/&gt;
  &lt;label for="instructor_17210"&gt;        
              Instructor ID: 17210, Common Name: David L. Kirp
              &lt;/label&gt;&lt;/p&gt;Which common name do you want to assign the instructor?&lt;p&gt;&lt;input type="radio" id="commonName_65" name="common_name" value="David Kirp"/&gt;&lt;label for="commonName_65"&gt;
              David Kirp
              &lt;/label&gt;&lt;/p&gt;&lt;p&gt;&lt;input type="radio" id="commonName_17210" name="common_name" value="David L. Kirp"/&gt;&lt;label for="commonName_17210"&gt;
              David L. Kirp
              &lt;/label&gt;&lt;/p&gt;&lt;/div&gt;&lt;button class="update-button" type="button"&gt;Update Common Name of an Instructor&lt;/button&gt;&lt;/div&gt;
  
  &lt;script&gt;
  $("div.update-dialog").dialog({
                  autoOpen: false,
                  dialogClass: 'dialogStyle',
                  resizable: false,
                  modal: true,
                  buttons: {
                      "Update": function() {
                      //$.load('update_common_name.php', 
                          $( this ).dialog( "close" );
                      },
                      Cancel: function() {
                          $( this ).dialog( "close" );
                      }
                  }
             });
  
  
  
           $('div.editable').on('click', '.update-button', function () {
              $(".update-dialog").dialog("open");
  
           }); 
  
  and I want it so that when I click on one of the radios, it will update the existing values to variables instructor_id and common_name (I eventually want to make an ajax request with them), like so: 
  
  $('input:radio').change(function () {        
              instructor_id = $(this).closest('input[name=instructor]:checked').val();
              common_name = $(this).closest('input[name=common_name]:checked').val();
  
              // alert is for testing
              alert(instructor_id + common_name);
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>However, when I test it out, the alert message returns something like "65undefined" and "undefinedDavid L. Kirp" rather than "65David L. Kirp", indicating that not both variables are being initialized. How can I fix this?</p>