php - jQuery、AJAX 表单处理 - 单选按钮值问题，

Question

我有以下表单 - 我的 A.php 中有 2 个单选按钮

<form action="form_processing.php" method="post" id ="myForm">
    <div class="radio-inline">
     <label>
      <input type="radio" name="direction" id="direction" value="up" checked>Up
     </label>
    </div>
    <div class="radio-inline">
     <label>
      <input type="radio" name="direction" id="direction" value="down" >Down
     </label>
    </div>
    <input type="hidden" name="status" value="false">   
    <br/>
    <button type="submit" name="sub" id="sub">Submit</button>
</form>

然后我得到了以下 jQuery A.js，

$('#myForm').on('submit', function(){
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){
            console.log(response);
        }
    });
    return false;
});

然后在我的 form_processing.php 上，

<?php 
    print_r($_POST);
?>

当我监控我的控制台时，无论我做什么，我最终都会得到......

Array
(
    [direction] => down
    [status] => false
)

我花了 2 天试图找出答案，但是..找不到问题的原因，为什么 radio 的值没有更新....

更具体地说 - 适用于 IE10/11，不适用于 chrome(尝试清除浏览数据等......仍然不起作用)

有人可以指导我哪里出错了吗？

非常感谢

Answer 1

问题是您手动循环所有输入，无论是否选中单选按钮。因此，当您位于与第一个单选按钮同名的第二个单选按钮时，您将覆盖以前的值。

你应该让 jQuery 通过使用以下方法来处理这个问题:

data: $(this).serialize(),

您当然可以手动检查输入的类型以及是否也进行了检查...

正如我在评论中提到的，您应该每页只使用一次 ID，因为 ID 必须是唯一的，但这与您的问题无关。