Question

我正在尝试使用JQuery和Ajax提交一组表单。表单的元素输入或名称并不总是相同。

除了获取选中单选按钮的值之外，代码适用于我所拥有的内容。它总是返回最后一个单选按钮的值。

以下是我获取表单数据的方法：

var values = {};
var formdata = new FormData();
$('form :input').each(function()
{
    formdata.append(this.name, $(this).val());
});

我也尝试过：

$('form.ajax :input, form.ajax input[type=radio]:checked').each(function()

获取已检查单选按钮值的正确方法是什么？我希望不必为我提交的每个表单编写单独的函数。

Answer 1

首先，您可以选择复选框和收音机以外的所有输入元素，然后附加所选复选框和无线电元素的值

var values = {};
var formdata = new FormData();
$('form').find(':input:not(:checkbox, :radio)').each(function () {
    formdata.append(this.name, $(this).val());
});

$('form').find(':checkbox:checked, :radio:checked').each(function () {
    formdata.append(this.name, $(this).val());
});

为什么不尝试以下操作而不是手动创建表单数据

var formdata = new FormData($('form')[0]);

Answer 2

您的代码正在遍历所有输入（包括单选按钮）并将其名称 - 值对添加到表单数据中。问题是如果你有多个单选按钮，你只会看到最后一个名称 - 值对，因为所有的单选按钮都有相同的名称。

为了正确处理单选按钮，您需要检查是否this.checked == true，这意味着这个特定的单选按钮是选中的：

$('form :input').each(function()
{
    if (this.type == 'radio' && !this.checked)
    {
        // this is a radio button, but it's not checked, so skip it
        return;
    }
    formdata.append(this.name, $(this).val());
});

Answer 3

要获取页面上每个选中的单选按钮的值，只需循环遍历它们，仅过滤选中的无线电输入并在每次出现时运行您想要的任何代码。

var formData = new FormData();

$('input[type=radio]').filter(':checked').each(function () {
    var inputField = $(this);
    formData.append(inputField.attr('name'), inputField.val());
});

Answer 4

在通过Ajax发送之前，您需要序列化所选单选按钮的列表。

var radioChecked = $(":radio").serialize();
$.ajax(
        {
             url: _action_url,
             data: radioChecked,
             success: function(result){
                 // What do we do when success
             }
        }
        );

JQuery获取单选按钮选择

4 个答案: