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天的时间尝试找出问题的原因，但是无法找到为什么单选按钮的值没有更新的原因...

更具体地说，在IE10/11上工作，在Chrome上不起作用（尝试清除浏览数据等等...仍然不起作用）

请问有人可以指导我错在哪里吗？

非常感谢，

- lukieleetronic

---

你应该先消除重复的ID。ID必须是唯一的。 - jeroen

按照@jeroen所说去做，另外，你的浏览器控制台有没有报错？你能否打开浏览器的网络选项卡并监视请求，以便查看POST提交了哪些值。 - mituw16

谢谢您指出重复的ID，我会去删除它们。 - lukieleetronic

Answer 1

问题是您手动循环遍历所有输入，无论单选按钮是否被选中。因此，当您到达与第一个相同名称的第二个单选按钮时，会覆盖先前的值。

您应该让jQuery处理这个问题，方法是使用以下代码：

data: $(this).serialize(),

当然，您可以手动检查输入类型以及是否已选中...

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

- jeroen

---

哦，是的！一切突然变得如此清晰 :-)，我还尝试了使用serialize()，效果非常棒！！非常非常感谢。 - lukieleetronic