设置单选按钮，检查了Ajax响应单选、按钮、Ajax

2023-09-10 21:58:31 作者：男性个性，适合成熟男性的

我需要设置在我的形式的单选按钮;它具有与来自一个AJAX响应里的值被检查。

我的Ajax响应是 response.drive 。手动或自动可以是其值。

更新：所以我尝试了一些不同的方法，但我不能想出解决办法。

方式一：

 如果（response.drive ==手册）{
    .find（'[NAME =驱动器]'）[0] .checked =真
} 其他 {
    .find（'[NAME =驱动器]'）[1] .checked =真
}

另一种方式：

  .find（输入：广播[名称='驱动'] [值='+ response.drive +']）[0] .checked = true.end （）

这是我如何成功的AJAX功能用于填充表单值。

  .success（函数（响应）{
                    //填充表单字段的数据从服务器返回
                    响应= jQuery.parseJSON（响应）
                    $（'＃editVehicle）

                            .find（'[NAME =vehicle_id]）。VAL（response.vehicle_id）.END（）
                            .find（'[NAME =vehicle_name]）。VAL（response.vehicle）.END（）
                            .find（'[NAME =席位]）。VAL（response.seats）.END（）
                            .find（'[NAME =行李]）。VAL（response.luggage）.END（）
                            .find（'[NAME =门]）。VAL（response.doors）.END（）
                            .find（'[NAME =排放]）。VAL（response.emission）.END（）

                            //。找到（'[NAME =驱动器]）。VAL（response.drive）.prop（选中，真）.END（）
                            //。找到（'[NAME =冷气]）。VAL（response.aircon）.prop（选中，真）.END（）
                            //.find("input:radio[name='drive'][value='"+ response.drive +']）[0] .checked = true.end（）

                            //if(response.drive ==手册）{
                .find（'[NAME =驱动器]'）[0] .prop（'检查'）。结束（）
                            //}其他{
                                //.find('[name=drive]')[1].prop('checked）
                            //}

                            .find（'[NAME =出租]）VAL（response.price）.END（）。

                    //显示对话框
----  - 
----
---

这是HTML的单选按钮：

 ＆LT; DIV CLASS =形组＆GT;
    ＆LT;标签=＆GT;传动：其中; /标签＆gt;
    ＆LT; DIV CLASS =COL-SM-8＆GT;
        ＆LT;标签类=无线电内联＆GT;
            ＆LT;输入类型=无线电名称=驱动器ID =值=1＆GT;手册
        ＆LT; /标签＆gt;
        ＆LT;标签类=无线电内联＆GT;
            ＆LT;输入类型=无线电名称=驱动器ID =值=2＆GT;汽车
        ＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

我怎样才能做到这一点是否正确？

解决方案

使用

  $（'＃editVehicle）找到。（'：无线电[名称=驱动器] [值=1]'）丙（'检查'，真正的）;

示例：

 $（函数（）{
  响应= {
    vehicle_id：2，
    车：雷诺TWINGO2798
    座位：43，
    行李：5，
    门：34，
    节能：455，
    驱动器：手动，
    冷气：是的，
    价格：435.000
  };
  
  执行console.log（response.drive）;
  
  如果（response.drive =='手册'）
    $（'＃editVehicle）找到（：电台[名称=驱动器] [值=1]）。支撑（'检查'，真正的）;
  其他
    $（'＃editVehicle）找到（：电台[名称=驱动器] [值=2]'）。支撑（'检查'，真正的）;

}）;

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>
＆LT; DIV ID =editVehicle＆GT;
  ＆LT; DIV CLASS =形组＆GT;
    ＆LT;标签=＆GT;传动：其中; /标签＆gt;
    ＆LT; DIV CLASS =COL-SM-8＆GT;
      ＆LT;标签类=无线电内联＆GT;
        ＆LT;输入类型=无线电名称=驱动器ID =值=1＆GT;手册
      ＆LT; /标签＆gt;
      ＆LT;标签类=无线电内联＆GT;
        ＆LT;输入类型=无线电名称=驱动器ID =值=2＆GT;汽车
      ＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

编辑：

更改。

 如果（response.drive =='手册'）{
                                .find（'：无线电[名称=驱动器] [值=1]）。支撑（'检查'，真）
                            } 其他 {
                                .find（'：无线电[名称=驱动器] [值=2]'）。支撑（'检查'，真）
                            }

到

 如果（response.drive =='手册'）{
                                $（'＃editVehicle）找到（：电台[名称=驱动器] [值=1]）。支撑（'检查'，真）
                            } 其他
                                $（'＃editVehicle）找到（：电台[名称=驱动器] [值=2]'）。支撑（'检查'，真）
                            }

  $（'。editVehicle'）。在（'点击'，函数（）{
            //获取通过属性记录的ID
            VAR ID = $（本）.attr（数据ID）;
            VAR vehicleId ='vehicleId ='+ ID;

            $阿贾克斯（{
                    网址：./includes/ajaxprocess_edit_vehicles.php，
                    方法：'后'，
                    数据：vehicleId
            }），成功（函数（响应）{
                    //填充表单字段的数据从服务器返回
                    响应= jQuery.parseJSON（响应）
                    $（'＃editVehicle）

                            .find（'[NAME =vehicle_id]）。VAL（response.vehicle_id）.END（）
                            .find（'[NAME =vehicle_name]）。VAL（response.vehicle）.END（）
                            .find（'[NAME =席位]）。VAL（response.seats）.END（）
                            .find（'[NAME =行李]）。VAL（response.luggage）.END（）
                            .find（'[NAME =门]）。VAL（response.doors）.END（）
                            .find（'[NAME =排放]）VAL（response.emission）.END（）。

                            如果（response.drive =='手册'）{
                                $（'＃editVehicle）找到（：电台[名称=驱动器] [值=1]）。支撑（'检查'，真）
                            } 其他 {
                                $（'＃editVehicle）找到（：电台[名称=驱动器] [值=2]'）。支撑（'检查'，真）
                            }



    $（'＃editVehicle）找到（'[NAME =出租]）VAL（response.price）.END（）。

                        //显示对话框
                        bootbox
                                。对话（{
                                        标题：编辑这车'，
                                        消息：$（'＃editVehicle），
                                        显示：假//我们将在以后手工表现出来
                                }）
                                。对（'shown.bs.modal'，函数（）{
                                        $（'＃editVehicle）
                                                .show（）//显示编辑表单
                                                .formValidation（'resetForm'）; //复位形式
                                }）
                                。对（'hide.bs.modal'，功能（五）{
                                        // Bootbox将删除模式（包括其中包含的编辑形式体）
                                        //隐藏模式后，
                                        //为此，我们需要备份的形式
                                        $（'＃editVehicle）隐藏（）appendTo（身体）。
                                }）
                                .modal（'秀'）;
                }）;
        }）;

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?

解决方案

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

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

上一篇：从当前URL中提取数据，并用它在Ajax调用作为paramenter它在、数据、URL、Ajax

下一篇：如何让玉兰花AJAX调用？玉兰花、AJAX

相关推荐

精彩图集

精彩推荐

图片推荐