提交表单时如何获取隐藏输入字段的值？答案

【问题标题】：How can I get the value of a hidden input field when submitting a form?提交表单时如何获取隐藏输入字段的值？
【发布时间】：2018-06-07 07:46:44
【问题描述】：

我有一个页面，上面有多个表单。每个表单都有两个提交按钮和一个包含 ID 的隐藏输入字段。

当用户单击其中一个提交按钮时，我需要将单击的提交按钮的值连同隐藏输入字段的值与表单提交一起发送。

这是我的页面的示例：

<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>


<script>
$(document).on("submit", "#options", function(e) {
   e.preventDefault();
   console.log(this.submitted) // gets the value of the submit button
});
</script>

目前我只能将点击提交按钮的值与表单提交一起发送，而不是隐藏输入字段的值。虽然我知道我可以使用 onclick="this.form.submited=this.previousElementSibling.value;" 来获取 ID，但这意味着我无法获取单击的提交按钮的值。

【问题讨论】：

不要多次使用同一个id。 id 应该是唯一的。据我所知，这显然是一个XY problem。你让这种方式比它需要的更复杂。此外，隐藏的输入值已发送。它们是隐藏的，而不是服务器。
查看这个答案stackoverflow.com/questions/1184624/…
等一下，您是否编辑了代码以删除 name 属性？我说的是id="options"。您需要name="id"，以便在服务器端访问数据。

标签： javascript html forms

【解决方案1】：

你可以使用val():

var value = $('input[name="input-name"]').val();

编辑：如果您想使用多个具有相同 name 的输入，请像这样使用它：

$('input[name="input-name"]').forEach(function($in) {
    var value = $in.val();
});

【讨论】：

您不应在一个页面中多次提供名称。名称应该是唯一值。
我们一起删除name 属性怎么样。
@TamirNahum 在表单提交的情况下，您要发送数据集合，我们需要多个具有相同名称的输入字段。
不，名称不需要是唯一的，通常也不是，例如一组无线电输入呢？
或者你可以跳过foreach并使用$(this)，它指的是当前正在提交的表单，并找到带有.find()的元素。

【解决方案2】：

给隐藏的输入框一个id say hiddenInput。要访问该值，您可以使用$(.hiddenInput).val();。要访问服务器端的值，可以使用req.query.id()访问它

【讨论】：

记住有多个隐藏的输入字段。

【解决方案3】：

使用$(this)获取当前表单的隐藏输入，多个元素不能使用同一个id，请将id改为class="options"。

var val = $(this).find('input:hidden').val());

$(document).on("submit", ".options", function(e) {
   e.preventDefault();
   console.log($(this).find('input:hidden').val()) // gets the value of the submit button
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form class="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form class="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

【讨论】：

【解决方案4】：

试试这个：

$(document).ready(function() {
  $("input[type='submit']").click(function(event) {
     event.preventDefault();
     var id = $(this).parent().find("input[name='id']").val();
     var action = $(this).data("action");
     console.log("action: " + action + ", id: " + id);
  });
});

<html>
<body>

<form id="options1">
<input type="hidden" name="id" value="104">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

<form id="options2">
<input type="hidden" name="id" value="44">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

<form id="options3">
<input type="hidden" name="id" value="39">
<input type="submit" data-action="delete" value="Delete">
<input type="submit" data-action="reply" value="Reply">
</form>

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

</body>
</html>

【讨论】：

【解决方案5】：

只需一个简单的find 即可获取您所需的数据。

$(document).on("submit", "form", function(e) {
  alert($(this).find('input[type="hidden"]').val())
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="options">
<input type="hidden" value="104">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="44">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

<form id="options">
<input type="hidden" value="39">
<input type="submit" onclick="this.form.submited=this.value;" value="Delete">
<input type="submit" onclick="this.form.submited=this.value;" value="Reply">
</form>

【讨论】：

你不能对多个元素使用相同的id。
@julekgwa 哦，是的！我错过了。实际上，不需要 Id 或类。但不能从标记中删除 ID，因为它可能在 CSS 中使用。
也许是为了造型

【解决方案6】：

你只需要这个：

<form>
    <input type="hidden" name="id" value="104">
    <input type="submit" name="action" value="Delete">
    <input type="submit" name="action" value="Reply">
</form>

单击Reply 按钮产生：

id=104&action=回复

【讨论】：