jQuery: Each names get the value of radio buttons group

Question

For example:

There are five names in the database (or would be more than that): ANGGIE, BOB, CHUCK, DEAN, EAST.

HTML:

<form name = "test">
<?php $num++; ?> 
<td> [each names in the database] </td>
<td><input type = "radio" id = "yes" name = "status'.$num.'" value = "1" /></td>
<td><input type = "radio" id = "no" name = "status'.$num.'" value = "0" /></td>
</form>

<div id="message"></div>

Result:

ANGGIE YES NO
BOB    YES NO
CHUCK  YES NO
DEAN   YES NO
EAST   YES NO

jQuery:

$(':radio:checked').each(function(){
alert($(this).val());
});

PROBLEM ONE I want to get out value of radio buttons in Jquery but what I got is only the first radio button group clicked. If I click Yes or No on ANGGIE, value will show up but if I click YES or NO on the other names the value won't show up.

So how to make it all working? Thanks.

ANSWER ONE

$(document).ready(function(){
    $("form[name='test']").submit(function(){
        $(':radio:checked').each(function(){
            alert($(this).val());
        });

        return false;
    });
});

Thank you Kingkero The code works because --> $("form[name='test']"). All this time I put $(input[name='status']:checked), thats why its not working, only one value is appear.

PROBLEM TWO And another problem is I am still trying to insert the values into database use an ajax.

$(document).ready(function() {

    getValue();

});

function getValue() {

    $("form[name='frm_filter']").submit(function(){
        $(':radio:checked').each(function(){
            var test = $(this).val();
            //alert($(this).val());

    var html = $.ajax({
        type: "POST",
        url: "result.php",
        data : ({test : test,
                 pseudoParam : new Date().getTime()
        }),
        async: false,
        cache: false  
    }).responseText;

    $("#message").html(html);

            });

        return false;
    });
}

In PHP:

when echo $test = $_POST["test"]; it only have one data inserted, is the last checked. What should I fix?

ANSWER TWO Ok, I've got the answer for my second problem: It should be like this:

$(document).ready(function() {
    $('#btnSave').click(function() {
    getValue();
});

});

function getValue() {

   var data = $(":radio:checked").serialize();

        var html = $.ajax({
            type: "POST",
            url: "result.php?"+data,
            data : ({data: data,
                     pseudoParam : new Date().getTime()
            }),
            async: false,
            cache: false  
        }).responseText;

        $("#message").html(html);

}

in PHP:

call data by $_REQUEST["status$num"];

sigh finally~

When do you want the values? Should this be triggered by a click/submit/change of a radio button? — kero, Mar 22 '14 at 01:44
Aaaah for testing it works or not by a click, if it works then am gonna submit them. — candies, Mar 22 '14 at 01:47
But [your code works](http://jsfiddle.net/gH6xH/) - I don't really know what you're asking — kero, Mar 22 '14 at 01:49
You are making a loop and giving `` elements the same IDs. Start there. — RCNeil, Mar 22 '14 at 02:24
XO I missed the --> $("form[name='test']"). I always put $("input[name='status']:checked") so thats why it doesn't work. Thank you master m(_ _)m and now I'm thinking how those values insert into database use an AJAX request to a PHP file. — candies, Mar 22 '14 at 02:37

score 1 · Answer 1 · answered Mar 22 '14 at 02:35

1

Take advantage of serialize() so you don't need to use "another" each() loop for your inputs. Also, your loop includes IDs, which, if there are 5, will cause a conflict because you will be using multiple IDs for various elements. Change the value if you wish to make it "yes" or "no"

http://jsfiddle.net/r3An2/ - DEMO

var data = $('#testform').serialize();
alert(data);

Also, make sure your <input /> has a closing tag ;)

answered Mar 22 '14 at 02:35

RCNeil

8,581
12
43
61

Thank you :) this's also perfect. am thinking how those values insert into database use an ajax request to a php file. – candies Mar 22 '14 at 03:32
1

This post has good answers - http://stackoverflow.com/questions/9430918/retrieving-serialize-data-in-a-php-file-called-using-ajax - you can either use `serializeArray()` instead, or see the second answer of using `serialize()` and then getting the data with `$_POST['status1'], $_POST['status2'], etc..` – RCNeil Mar 22 '14 at 16:55

score 0 · Answer 2 · answered Mar 22 '14 at 02:57

You need to remember the context of your variables. In the example code you gave, '.$num.' is not being evaluated. Neither is the loop in brackets. You need to enclose them inside a tag, like so:

<form name = "test">
    <table>
    <?php for ( $num=0; $num < 5; $num++) { ?>
     <tr> 
       <td><?php echo $row[$num]['NAME']; ?></td>
       <td><input type="radio" 
                  id="yes<?php echo $num; ?>" 
                  name="status<?php echo $num; ?>" value="1"/>
       </td>
       <td><input type="radio" 
                  id="no<?php echo $num; ?>" 
                  name="status<?php echo $num; ?>" 
                  value="0"/>
       </td>
     </tr>
    <?php } ?>
 </form>

jQuery: Each names get the value of radio buttons group

2 Answers2