如何序列化表单，而不是输入的值获取输入的 ID

Posted 2023-05-09

【中文标题】如何序列化表单，而不是输入的值获取输入的 ID

【英文标题】：How to serialize form, but instead of an input's values get the input's ID

【发布时间】：2018-02-12 20:58:57

【问题描述】：

这是jsfiddle for reference。

我需要序列化一个表单，因此当用户点击提交时，我会以“序列化”格式获得用户选择的所有输入 ID。我已经使用它来获取表单 ID：

$("button").click(function()
  $("div").text($("form").serialize());
);

问题是，它给了我表单的值。如何修改此代码以提供所选输入的 ID 而不是值？

这是 html：

<form action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>

<button>Serialize form</button>

<div></div>

因此，例如，单击按钮时，序列化输出应显示“option1”“option2”或“option3”，而不是“2.00”“2.00”或“2.00”。

编辑 我希望有一种方法可以将“.attr('id')”合并到序列化中，我有

$(document).ready(function() 
  $('input').on('change', function () 
      alert($(this).attr('id'));
  );
);

这会提醒我 ID，但我找不到将其合并到序列化中的方法。

【问题讨论】：

看看这个，也许是另类：***.com/questions/3584541/…

为它创建一个自定义函数，我会尝试做一个

【参考方案1】：

使用 Array.from

的另一种实现方式

$(document).ready(function () 
    $('#form').bind('submit', function () 
        var serialize = Array.from($('input:checked'), e => "id=" + e.id).join('&');
        console.log(serialize);
        return false;
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="" id="form">
    Choose one:<br>
    <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
    <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
    <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
<br/>
    Choose one:<br>
    <input type="checkbox" name="name1" id="option1" value="2.00">Option 1<br>
    <input type="checkbox" name="name2" id="option2" value="2.00">Option 2<br>
    <input type="checkbox" name="name3" id="option3" value="2.00">Option 3<br>
    <input type="submit" name="submit" value="Serialize form" id="submit" />
</form>

【参考方案2】：

这个函数给出一个 ID 值而不是 name，希望这是你需要的。

片段有两种形式，一种是单选框，另一种是复选框

function getSerialize(form)

 var selected = $('form input:checked');
 var serialized = '';
 selected.each(function()
 	if(serialized != '')serialized += '&';
 	serialized += $(this).attr('name') + '=' + $(this).attr('id');
 );
 return serialized;


$('#button1').click(function()
console.log(getSerialize('#form1'));
);

$('#button2').click(function()
console.log(getSerialize('#form2'));
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>For radio</h5>
<form  id="form1"  action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>
<br>
<button id="button1">Serialize form</button>
<br>
<h5>For checkboxes</h5>

<form id="form2" action="">
  Choose one:<br>
  <input type="checkbox" name="name1" id="option1" value="2.00">Option 1<br>
  <input type="checkbox" name="name2" id="option2" value="2.00">Option 2<br>
  <input type="checkbox" name="name3" id="option3" value="2.00">Option 3<br>
</form>

<button id="button2">Serialize form</button>

【讨论】：

感谢您的回复，有没有办法让无线电输入和复选框起作用？

是的，一切皆有可能，让我试试

K 检查我编辑的答案，其中包含单选和复选框

效果很好！正是我需要的，非常感谢您的帮助。

欢迎快乐编码

【参考方案3】：

经典XY problem.

您不需要其他序列化方法。您只需将option1、option2 和option3 放入value 属性，而不是id。这样，通常的序列化将返回您想要的。

【讨论】：

不，这个值是为别的东西保留的

【参考方案4】：

如果 Styx 的答案不能满足您的需求，那么认为您将不得不提出自己的“序列化”。来自 jQuery 的那个旨在以一种类似于在表单上点击提交的方式序列化数据。当您在 html 中点击提交时，只会发送单选按钮的选定值。

【讨论】：

我希望有办法将“.attr('id')”合并到序列化中，这不可能吗？

【参考方案5】：

适用于您的情况的“dirty”方式如下。但是，如果您这样使用它，那么您无论如何都不是动态的。我只是得到id 和name 并将它们加在一起作为string（不是urlencoded 或此示例中的其他任何内容......）。

请阅读以下内容以获得实用的解决方案：

但是，您可以将这些无线电放在表单之外。当有人提交表单时，您使用preventDefault() 停止提交，而是将无线电ID 附加到serialized 表单数据。一个例子是serialized_data += "&name=" + encodeURIComponent(THE_ID);。

$(document).ready(function()
    $("button").click(function()
    	var radio = $('input[name="name"]:checked');
      $("div").text(radio.prop('name') + '=' + radio.prop('id'));
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  Choose one:<br>
  <input type="radio" name="name" id="option1" value="2.00">Option 1<br>
  <input type="radio" name="name" id="option2" value="2.00">Option 2<br>
  <input type="radio" name="name" id="option3" value="2.00">Option 3<br>
</form>

<button>Serialize form</button>

<div></div>

【讨论】：

我现在正在尝试这个，但你所说的“不是动态的”是什么意思？

好吧，如果您的表单有更多需要序列化的输入等，那么这种精确设置是不可能的。因为我们选择了一个特定的单选元素而不是“任何”。因此，您应该尝试我在答案第二部分中写的解决方案。

另外，有没有办法让复选框也可以使用？

当然，您可以为任何输入元素应用大部分代码。

我很抱歉，但是我如何合并您的第二个答案的代码？ jQuery 会是什么样子？