仅当 Ajax 调用返回成功时更改单选按钮答案

【问题标题】：Change a radio button only if Ajax Call returns Sucess仅当 Ajax 调用返回成功时更改单选按钮
【发布时间】：2020-12-26 03:25:24
【问题描述】：

在 HTML 表单中，我有一组单选按钮。在 onchange() 事件中，它通过 Ajax 调用推送其值。

Ajax 调用然后访问服务器并根据调用发送的值进行处理。它要么返回一个字符串"success" 要么返回"failure"。

如果返回字符串是"success"，那么单选按钮应该保持不变。在"failure" 的情况下，它应该恢复到最后一个位置。

我做了什么？好吧，我需要为复选框做类似的事情，如果复选框很容易，我只需取消选中特定的复选框。我不知道如何记录单选按钮的最后位置...

有什么帮助吗？

【问题讨论】：

请发布您的代码
目前还没有代码。我需要注意这个。
“我做了什么？” - 好问题，你做了什么？也许提供一些代码？
发布您的代码会有所帮助，因为有多种方法可以做到这一点。
旧的单选按钮值是否存储在您的数据库中？我问这个是因为：如果是，那么您不必使用标志变量或类似的东西来将旧值存储在前端。您的 ajax 调用可以返回旧值以及“失败”响应

标签： javascript html ajax radio-button dom-events

【解决方案1】：

当您最后一次 ajax 请求在检查单选按钮后返回成功数据时，将选中的单选按钮的值保存到变量中。

当您的下一个请求返回失败数据时，只需从变量中获取值并选中相应的单选按钮。

使用 AJAX 请求更新代码

$(function(){

    var lastInput = 'r1';

    $('input').change(function(){

        var rdio = $(this);

        $.ajax({
          url: 'script.php',
          type: 'POST',
          dataType: 'json',
          'success' : function(response){
            if(response.status == 'success'){
                lastInput = rdio.val();
            }
            else{
                $('input[name="radio_group"][value="'+ lastInput +'"]').prop('checked', true);                
            }
          },
        });
    });
});

虚拟代码

$(function(){

    var lastInput = 'r1';

    $('input').change(function(){

        var rdio = $(this);

        switch(rdio.val()){
            case 'r1':
                lastInput = rdio.val();
                alert("Success");
                break;

            case 'r2':
                $('input[name="radio_group"][value="'+ lastInput +'"]').prop('checked', true);
                alert("Failure");
                break;

            case 'r3':
                lastInput = rdio.val();
                alert("Success");
                break;              
        }
    });
});

出于测试目的，我在没有 Ajax 请求的情况下进行了测试，并使用 Switch/Case 语句对其进行了模拟，其中第二个条件显示了失败时的行为。

http://jsfiddle.net/rYxUs/

【讨论】：

我已经更新了上面的代码并包含了一个虚拟的 Ajax 请求，但是这个概念应该很清楚:)

【解决方案2】：

尝试使用标志变量来保存之前选择的单选按钮。

如果 ajax 返回失败，则尝试使用标志变量检查上一个单选按钮。

使用以下代码检查上一个单选按钮

$("input[name='radioButtonName'][value='valurFrom FlagVariable']").attr("checked", "checked");

【讨论】：

【解决方案3】：

你可以试试这样的：

var radioValue = $("input[type='radio']").attr('checked');

然后就成功了：

$("input[type='radio']").attr('checked', 'checked');

失败时：

$("input[type='radio']").removeAttr('checked');

【讨论】：

【解决方案4】：

对我来说效果很好。

$("input:radio[name='profile']").click(function(){

警报($(this).val());

});

【讨论】：