0

How I could populate the checked state of radio buttons depending on data loaded from the database?

I want to get data radio button for this form

                  <div class="col-md-4">

                    <label>
                      <input type="radio" name="menu_status" class="flat-red" value="1"> Enable
                    </label>
                    <label>
                      <input type="radio" name="menu_status" class="flat-red" value="0"> Disable
                    </label>

this my array result

{"menu_id":"00001","parent_id":"0    ","menu_name":"Dashboard","menu_title":"Dashboard","url":"dashboard_c","position_menu":"1","parent_status":"0","menu_status":"1","fa_icon":"fa-dashboard","type":"1"}

and I am pass that result through ajax like this

$.ajax({
    url : "<?php echo site_url('cpanel/form_c/data_edit/')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

        $('[name="menu_id"]').val(data.id);
        $('[name="parent_id"]').val(data.parent_id);
        $('[name="menu_name"]').val(data.menu_name);
        $('[name="menu_title"]').val(data.menu_title);
        $('[name="url"]').val(data.url);
        $('[name="order"]').val(data.position_menu);
        $('[name="parent_status"]').val(data.parent_status);
        //$('[name="menu_status"]').val(data.menu_status);
        $('[name="fa_icon"]').val(data.fa_icon);
        $('[name="type_form"]').val(data.type);

        $.each (data, function (i, obj) {
          $(':radio[name="menu_status"][value=' + obj.menu_status + ']').prop('checked', true);
        });


        /*if (data.parent_status===1) {
          $('[name="menu_status"]').val("1").prop('checked',true);
        } else {
          $('[name="menu_status"]').val("0").prop('checked',true);
        }*/

        $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Edit Menu'); // Set title to Bootstrap modal title

    },

Can someone help me to take the json data to select the appropriate choices?

1
  • my problem is no 3, I can't make radio button selected
    – ian
    Sep 7, 2016 at 8:07

2 Answers 2

0

var data = {"menu_id":"00001","parent_id":"0    ","menu_name":"Dashboard","menu_title":"Dashboard","url":"dashboard_c","position_menu":"1","parent_status":"0","menu_status":"1","fa_icon":"fa-dashboard","type":"1"}

console.log(data.menu_status)
$('input[name=menu_status][value='+data.menu_status+']').prop('checked', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">

  <label>
    <input type="radio" name="menu_status" class="flat-red" value="1">Enable
  </label>
  <label>
    <input type="radio" name="menu_status" class="flat-red" value="0">Disable
  </label>
</div>

try this way, the check radio button will be equal to what data.menu_status value is

2
  • I tried this before but still did'nt get the result I want. But radio button is still not checked
    – ian
    Sep 7, 2016 at 8:02
  • can you see in the demo it is that enable is checked because the value is 1 if value is 0 then it will be disable maybe the value of data.menu_status is not 1 or 0
    – guradio
    Sep 7, 2016 at 8:03
0

Looks like the radio button class is flat-red. You could simply use this one instead of going with complex selectors.

You could use a condition instead.

if (data.parent_status == 1) {
     $('.flat-red').checked = true;
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.