Ajax takes value of first radio button in PHP

Question

I have two different set of radio buttons. Under this I am triggering the passing of value to another file when the second set of radio button is triggered. But the issue is that while passing the value jquery takes value of first radio button in the second set. No matter whichever button you select.

<script type = "text/javascript">
$(document).ready(function(){
  $("#sub_category_form_cat_1").click(function()
  {
        var main_cat=$("#main_cat:checked").val();
        var sub_cat_form1=$("input:radio[name='sub-category_form_cat_1']:checked").val();
        $.ajax
        ({
            data: {'cat':main_cat,'sub_cat':sub_cat_form1},
            url: "ajax_files/events-select.php",
            type: 'GET',                
            success: function(data) 
            {
                $("#displayedresults").html(data);
                $('#loading_spinner').hide();
                $('#loading_text').hide();
                $('#loading_row').hide();
                $('#displayedresults').show();
                //$('.button_export').show();
                //$("a.button_export").attr("href", string);
            }
        });
        return false;
  });
});

<tr><td>Category:</td><td>
    <input type="radio" name="category_form_cat_1" value="Adults" id="main_cat" />&nbsp;Adults &nbsp;
    <input type="radio" name="category_form_cat_1" value="Kids" id="main_cat" />&nbsp;Kids</td></tr>
<tr><td>Sub-Category:</td><td>
    <input type="radio" name="sub-category_form_cat_1" value="Dance" id="sub_category_form_cat_1"/>&nbsp;Dance&nbsp;
    <input type="radio" name="sub-category_form_cat_1" value="Fitness" id="sub_category_form_cat_1"/>&nbsp;Fitness
    <input type="radio" name="sub-category_form_cat_1" value="Workshop" id="sub_category_form_cat_1"/>&nbsp;Workshop&nbsp;
    <input type="radio" name="sub-category_form_cat_1" value="Events" id="sub_category_form_cat_1"/>&nbsp;Events</td></tr>

Answer 1

You can't have more than one element with a given id . This will always return the first element with that id . You need to reference the element within the form

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

Since this isn't working, let's try something different

<tr><td>Category:</td><td id="maincat>
    <input type="radio" name="category_form_cat_1" value="Adults" />&nbsp;Adults &nbsp;
    <input type="radio" name="category_form_cat_1" value="Kids" />&nbsp;Kids</td></tr>
<tr><td>Sub-Category:</td><td id="subcat">
    <input type="radio" name="sub-category_form_cat_1" value="Dance" />&nbsp;Dance&nbsp;
    <input type="radio" name="sub-category_form_cat_1" value="Fitness" />&nbsp;Fitness
    <input type="radio" name="sub-category_form_cat_1" value="Workshop" />&nbsp;Workshop&nbsp;
    <input type="radio" name="sub-category_form_cat_1" value="Events" />&nbsp;Events
</td></tr>

And for your JS

var main_cat = $("#maincat").children("input:checked").val();

Answer 2

id确实是针对单个和唯一标签的，您真正想要做的是给所有无线电类名称“ sub_category_form_cat_1”，然后使用$（“。sub_category_form_cat_1”）。click（function（）{}）;