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

Posted 2023-03-05

【中文标题】jQuery、AJAX 表单处理 - 单选按钮值问题，

【英文标题】：jQuery, AJAX form processing - Radio button value issues,

【发布时间】：2014-06-26 05:55:56

【问题描述】：

我有以下表格 - 我的 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（试图清除浏览数据等...仍然无法正常工作）

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

非常感谢，

【问题讨论】：

您应该从摆脱双重 ID 开始。 ID 必须是唯一的。

照@jeroen 所说的去做，你的浏览器控制台是否有任何错误？您能否打开浏览器的 net 选项卡并查看请求，以便查看在 POST 中提交了哪些值

谢谢你指出重复的ID，我去删除它们。

【参考方案1】：

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

你应该让 jQuery 来处理这个问题：

data: $(this).serialize(),

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

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

【讨论】：

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