CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Gaurav Pareek
Gaurav Pareek

Reputation: 47

Ajax takes value of first radio button in PHP

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>

Upvotes: 0

Views: 690

Answers (2)

Machavity
Machavity

Reputation: 31614

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();

Upvotes: 1

Nate
Nate

Reputation: 403

id's are really for single and unique tags, what you really want to do is to give all of the radios class names of "sub_category_form_cat_1" and then use $(".sub_category_form_cat_1").click(function(){});

Upvotes: 0

Related Questions