Set radio button checked with AJAX response

Question

I need to set a radio button in my form; it has to be checked with the values coming from an AJAX response.

My AJAX response is response.drive. "Manual" or "Auto" could be its value.

UPDATE: So I tried it some different ways, but I couldn't figure this out.

One way :

if(response.drive=="Manual") {
    .find('[name=drive]')[0].checked = true         
} else {
    .find('[name=drive]')[1].checked = true
}  

Another way:

.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

This is how my ajax success function use to populate the form values.

.success(function(response) {
                    // Populate the form fields with the data returned from server
                    response = jQuery.parseJSON(response)
                    $('#editVehicle')

                            .find('[name="vehicle_id"]').val(response.vehicle_id).end()
                            .find('[name="vehicle_name"]').val(response.vehicle).end()
                            .find('[name="seats"]').val(response.seats).end()
                            .find('[name="luggage"]').val(response.luggage).end()
                            .find('[name="doors"]').val(response.doors).end()
                            .find('[name="emission"]').val(response.emission).end()

                            //.find('[name="drive"]').val(response.drive).prop("checked",true).end()
                            //.find('[name="aircon"]').val(response.aircon).prop("checked",true).end()
                            //.find("input:radio[name='drive'][value='"+ response.drive +"']")[0].checked = true.end()

                            //if(response.drive=="Manual"){
                .find('[name=drive]')[0].prop('checked').end()
                            //}else{
                                //.find('[name=drive]')[1].prop('checked')
                            //} 

                            .find('[name="rental"]').val(response.price).end();

                    // Show the dialog
---- -
---- 
---

This is HTML for radio button :

<div class="form-group">
    <label for="">Transmission :</label>
    <div class="col-sm-8">
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="1"> Manual
        </label>
        <label class="radio-inline">
            <input type="radio" name="drive" id="" value="2"> Auto
        </label>                                                                
    </div>
</div>      

How can I do this correctly?

Answer 1

Use

$('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);

Sample:

---

$(function() {
  response = {
    "vehicle_id": 2,
    "vehicle": "RENAULT TWINGO2798",
    "seats": 43,
    "luggage": 5,
    "doors": 34,
    "emission": 455,
    "drive": "Manual",
    "aircon": "Yes",
    "price": "435.000"
  };
  
  console.log(response.drive);
  
  if (response.drive == 'Manual')
    $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true);
  else
    $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editVehicle">
  <div class="form-group">
    <label for="">Transmission :</label>
    <div class="col-sm-8">
      <label class="radio-inline">
        <input type="radio" name="drive" id="" value="1">Manual
      </label>
      <label class="radio-inline">
        <input type="radio" name="drive" id="" value="2">Auto
      </label>
    </div>
  </div>
</div>

Edit:

Change it.

if (response.drive == 'Manual'){
                                .find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else {
                                .find(':radio[name=drive][value="2"]').prop('checked', true)
                            } 

to

if (response.drive == 'Manual'){
                                $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else
                                $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true)
                            }  

---

$('.editVehicle').on('click', function() {
            // Get the record's ID via attribute
            var id = $(this).attr('data-id');
            var vehicleId = 'vehicleId=' + id;

            $.ajax({
                    url: './includes/ajaxprocess_edit_vehicles.php',
                    method: 'post',
                    data: vehicleId
            }).success(function(response) {
                    // Populate the form fields with the data returned from server
                    response = jQuery.parseJSON(response)
                    $('#editVehicle')

                            .find('[name="vehicle_id"]').val(response.vehicle_id).end()
                            .find('[name="vehicle_name"]').val(response.vehicle).end()
                            .find('[name="seats"]').val(response.seats).end()
                            .find('[name="luggage"]').val(response.luggage).end()
                            .find('[name="doors"]').val(response.doors).end()
                            .find('[name="emission"]').val(response.emission).end();

                            if (response.drive == 'Manual'){
                                $('#editVehicle').find(':radio[name=drive][value="1"]').prop('checked', true)
                            } else {
                                $('#editVehicle').find(':radio[name=drive][value="2"]').prop('checked', true)
                            }   



    $('#editVehicle').find('[name="rental"]').val(response.price).end();

                        // Show the dialog
                        bootbox
                                .dialog({
                                        title: 'Edit This Vehicle',
                                        message: $('#editVehicle'),
                                        show: false // We will show it manually later
                                })
                                .on('shown.bs.modal', function() {
                                        $('#editVehicle')
                                                .show()                       // Show the edit form
                                                .formValidation('resetForm'); // Reset form
                                })
                                .on('hide.bs.modal', function(e) {
                                        // Bootbox will remove the modal (including the body which contains the edit form)
                                        // after hiding the modal
                                        // Therefor, we need to backup the form
                                        $('#editVehicle').hide().appendTo('body');
                                })
                                .modal('show');
                });
        });

Answer 2

You can give an id to each radiobutton and then:

$("#drive_1").attr('checked', 'checked');