CODEWITHSUNDEEP
phpjqueryhtml
candies
candies

Reputation: 131

jQuery: Each names get the value of radio buttons group

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~

Upvotes: 0

Views: 829

Answers (2)

B2K
B2K

Reputation: 2611

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>

Upvotes: 0

RCNeil
RCNeil

Reputation: 8759

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

Upvotes: 1

Related Questions