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. \"Manua

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