Question

我需要序列化表单，因此当用户点击提交时，我会获得用户以“序列化”格式选择的输入的所有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

此函数提供ID而不是名称的值，希望这是您所需要的。

Snippet有两个表单，一个带收音机，另一个带复选框

＆＃13;

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'));
});

＆＃13;

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

＆＃13;

Answer 2

使用 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 3

古典XY problem。

您不需要其他序列化方法。您只需将option1，option2和option3置于value属性中，而不是id。通过这种方式，通常的序列化将返回给您所需的内容。

Answer 4

如果Styx的回答没有满足您的需求，那么请认为您必须提出自己的序列化＆＃34;。来自jQuery的一个用于序列化数据的方式非常类似于你在表单上点击提交的方式..当你在html中点击提交时，只发送无线电按钮的选定值。

Answer 5

在您的情况下适用的“脏”方式如下。但如果你这样使用它，你就不会有任何动态。我只是得到了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>

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

5 个答案: