multiple id in radio refresh value sending by ajax

Question

i have multiple radio buttom here

<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_a'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_b'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_c'>
<input class='required' type='radio' name='Tbl' id='get_this' value='tbl_d'>

i want to sending the value with ajax by checked button, but only the fist button will processed, when i click the others it's not refreshing the queries

here my ajax

<script type="text/javascript"> 
$(document).ready(function(){
    $("#show_data").load('show_data.php');

    $("#get_this").click(function(){
        var cari = $("#get_this:checked").val();
        cariData(cari);
    });

    function cariData(e){
        var cari = e;
        $.ajax({
            type    : "GET",
            url     : "load_fields.php",
            data    : "cari="+cari,
            timeout : 3000,
            beforeSend  : function(){       
                $("#show_data").html("<img src='loading.gif' />");          
            },                

            success : function(data){
                $("#show_data").html(data);
            }
        });
    }
});
</script>

if it already exists, can help me find the same topic? sorry for my English ^^

Answer 1

Ids should be unique to the element. Make the ids unique, choice_1, choice_2, or something like that or you could change id to class, and in your jquery change id selector to a class selector. Change html to something like:

<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_a'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_b'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_c'>
<input class='required' type='radio' name='Tbl' class='get_this' value='tbl_d'>

and js to

$("input:radio[name=Tbl]").click(function() {
    var cari = $(this).val();
    cariData(cari);
});

or

$(".get_this").click(function(){
    var cari = $(".get_this:checked").val();
    cariData(cari);
});