How to show passed php value to ajax in a radio button

Question

I have a list of passed values from my php code to my ajax script.

My problem is the value that should be put in the radio button is not check. The other inputs are showing fine but the gender is not.

passed value example: {"name":"Okay","age":"11","gender":"Male","status":"Single"}

html:

Gender <input type="radio" id="gender" name="gender" value="Male" /> Male <br />
        <input type="radio" id="gender" name="gender" value="Female" /> Female <br />

scipt:

<script type="text/javascript">
$(document).ready(function(){
$("#editInput").click(function(){
    var data = {};
        data.name = $('#name').val();
        data.age = $('#age').val();
        data.gender = $('#gender').val();
        data.status = $('#status').val();

        $.ajax({
            type: "POST",
            url: "viewInputs.php",
            data: data,
            cache: false,
            dataType:"JSON",
            success: function (result) {

             $("#name").val(result.name);
             $("#age").val(result.age);
             $("#gender").val(result.gender);
             $("#status").val(result.status);

            }
        });
            return false;

});

});
</script>

You shouldn't have two HTML elements with the same ID, you're only selecting the first one. Also, you can't set the value of a radio button like that, you need to use `.prop('checked', true)` on the button you want to select. — Waxen, Jul 23 '14 at 16:47

Nawed Khan · Accepted Answer · 2014-07-23T17:12:51.417

2

You should not have two elements with same ID. Use name attribute This is how you'd check a radio button:

$('input[type=radio][name="gender"][value='+result.gender+']').prop('checked', true);

I have added name="gender" to be more precise.

edited Jul 23 '14 at 17:12

answered Jul 23 '14 at 16:54

Nawed Khan

4,393
1
10
22

@Nawed Khan what if i need to put it in a specific radio button? cuz i have different radio button not just Gender. – user3856999 Jul 23 '14 at 16:56
give them a class "Gender" and then do $('.Gender[value='+result.gender+']').prop('checked', true); – Nawed Khan Jul 23 '14 at 16:59

viralpickaxe · Answer 2 · 2014-07-23T16:58:31.710

0

To check a radio button you need to use .prop('checked',true/false). Instead of .val()

edited Jul 23 '14 at 16:58

answered Jul 23 '14 at 16:53

viralpickaxe

481
4
13

Actually it is deprecated, now we use `.prop()` – Valentin Mercier Jul 23 '14 at 16:57
Yes also it only works once! http://stackoverflow.com/questions/24910549/why-select-deselect-checkbox-works-only-once-with-jquery – Rob Schmuecker Jul 23 '14 at 16:58

How to show passed php value to ajax in a radio button

2 Answers2