Question

我有一个包含多个表单的页面。每个表单都有两个提交按钮和一个包含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，但这意味着我无法获得点击提交按钮的值。

Answer 1

您可以使用val()：

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

编辑：如果您想使用具有相同name的多个输入，请按以下方式使用它：

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

Answer 2

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

访问它

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

Answer 4

试试这个：

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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＆安培;行动=回复

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

6 个答案: