Why do I get undefined for yes/no radio button

I am using Ajax with jQuery and PHP.

When the user submits part of the multipart form, the results are displayed in a new div. There are a few yes/no radio buttons in the form. But instead of showing "yes" or "no" in the results, I get an "undefined." Any ideas as to what I'm doing wrong here?

HTML

<div class="usedYesNo">开发者_JS百科
  <h5>Question 1</h5>
  <ul class="YesNo">
    <li>
      <input class="option-child" type="radio" name="YesNo1[]" value="Yes" >
      <label for="Yes">Yes</label>
    </li>
    <li>
      <input class="option-child" type="radio" name="YesNo1[]" value="No" >
      <label for="No">No</label>
    </li>
 </ul>
</div>
<div class="usedYesNo">
  <h5>Question 2</h5>
  <ul class="YesNo">
    <li>
      <input class="option-child" type="radio" name="YesNo2[]" value="Yes" >
      <label for="Yes">Yes</label>
    </li>
    <li>
      <input class="option-child" type="radio" name="YesNo2[]" value="No" >
      <label for="No">No</label>
    </li>
 </ul>
</div>

jQuery

$(form).ajaxSubmit({

    type: "POST",
    data: {

        YesNo1 : $('YesNo1').val(),
        YesNo2 : $('YesNo2').val()

       },
    dataType: 'json',
    url: './includes/ajaxtest3.php',
    error: function() {alert("error!");},                   
    success: $('#output2').html(data.message.join('<br />'));
 //...

PHP

 $return['message'] = array();
 $return['message'][] = 'Answer to first question: ' . $_POST['YesNo1'];
 $return['message'][] = 'Answer to second question: ' . $_POST['YesNo2'];
  echo json_encode($return);

you need # to get elements by id wrapped inside a jQuery obj

$('#YesNo1').val(),
$('#YesNo2').val()

Your selector

$('YesNo1') is saying look for a tag named <YesNo1> as in element

what you want do is get the input by name where it is selected

$(form).ajaxSubmit({

    type: "POST",
    data: {

        YesNo1 : $('input[name="YesNo1[]"]:checked').val();
        YesNo2 : $('input[name="YesNo2[]"]:checked').val(); 

       },
    dataType: 'json',
    url: './includes/ajaxtest3.php',
    error: function() {alert("error!");},                   
    success: $('#output2').html(data.message.join('<br />'));
 //...

working demo

You aren't using the right selector in your calls to jQuery.

I'm pretty sure that your problem is the names of the radio buttons. To simplify things I would using a naming structure like Q1Yes, Q1No, etc or even try to have your questions phrased so that if a radio button is checked it means the user answered yes and leave it unchecked for no. You could have the name of your radio buttons just Question1 and Question2 at that point.

I've used this is the past with great success. You don't need to store the value in an array. Make your inputs like this:

<input class="option-child" type="radio" name="YesNo1" value="Yes" > 
<input class="option-child" type="radio" name="YesNo1" value="Yes" > 

Then you can pull the result of the selected value using jquery.

var YesNo1 =$("input[name=YesNo1]:checked").val();

YesNo1 will then contain the value of the selected option

The selectors you need are:

$('input[name="YesNo1[]"]:checked').val(); 
$('input[name="YesNo2[]"]:checked').val();