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

Question

这是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，但我找不到将其合并到序列化中的方法。

Answer 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>

Answer 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>

Answer 3

经典XY problem.

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

Answer 4

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

Answer 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>