jquery click() 在提交按钮中答案

【问题标题】：jquery click() in submit buttonjquery click() 在提交按钮中
【发布时间】：2014-11-04 23:23:05
【问题描述】：

我在表单中的提交按钮上有一个 .click() 函数：

$("#submitId").click(function () {
    $('#hiddenInput').val(someVariable);
});

它就像一个魅力。单击提交按钮时，click() 函数填充隐藏的输入变量，然后提交整个表单。然后，服务器接收到带有刷新内容的隐藏输入。

我的问题是：它会一直有效吗？是否有任何危险，由于某种我还不知道的原因，提交操作首先执行，而 click() 函数稍后执行？我想确保隐藏的输入总是被刷新。

【问题讨论】：

$("form").submit();将绕过它，用户可以从他们的控制台或 url 执行调用。
而且我认为它也可能在按 ENTER 提交表单时被绕过？试一试。
@JamesBlond - Enter 仍将导致点击处理程序执行。
点击事件总是先完全执行。否则，您将如何通过防止默认来停止提交。 For Reference
@TravisJ - 如果焦点在按钮上，enter 将导致点击处理程序执行。但是如果焦点在表单字段之一上，enter 将绕过单击处理程序，因为没有与按钮交互（仅与表单交互）。我想。

标签： javascript jquery forms click submit

【解决方案1】：

使用表单时，始终建议让submit 按钮完成工作：触发表单的提交事件 ...这就是它的意义所在。然后，您将在form 上侦听submit 事件，而不是在submit 按钮上侦听click 事件。

您可以使用event.preventDefault() 来阻止默认提交表单，以便您可以做一些家务然后您可以提交表单。

$("#submitId").closest('form').on('submit', function(event) {
    event.preventDefault();
    $('#hiddenInput').val(someVariable); //perform some operations
    this.submit(); //now submit the form
});

或者简单地说，

$('form').on('submit', function(event) {
    event.preventDefault();
    $('#hiddenInput').val(someVariable); //perform some operations
    this.submit(); //now submit the form
});

【讨论】：

如果您的提交按钮使用formaction，这将不起作用。我建议使用click 事件触发提交按钮，或者将formaction 的值分配给表单的action 属性，然后触发submit 事件。
@kevinAdu 你是什么意思？你有演示来说明你的担忧吗？谢谢。
这不会让它永远循环吗？提交时...然后重新提交
@Claudiu 为什么你认为它会永远循环？如果您可以创建一个演示来说明您的担忧，我将非常乐意考虑这一点。期待.....
请注意this.submit() 与$(this).submit() 不同。

【解决方案2】：

最好像这样将值更新直接附加到表单的提交处理程序

$("#submitId").closest("form").submit(function () {
 $('#hiddenInput').val(someVariable);
});

【讨论】：

就是这样。可以通过多种方式触发提交事件。无需猜测用户如何触发提交事件（点击？按键？），只需将处理程序直接附加到表单的提交即可。
如果提交按钮嵌入到表单内的某个元素中，这将不起作用。我会使用.closest('form') 而不是.parent('form')。
@PeterKA - 是的，这是一个很好的观点。将parent 编辑为closest。

【解决方案3】：

我个人认为阻止提交更安全，然后设置所需的输入值，然后才以编程方式提交表单。喜欢：

$("form").submit(function (e) {
    e.preventDefault();
    $('#hiddenInput').val(someVariable);
    $(this).submit();
});

【讨论】：

因为 $(this).submit();触发提交事件，这段代码将创建一个无限循环。您要使用的是一个简单地提交表单而不触发提交事件的操作。

【解决方案4】：

.click() 应该总是先运行。

【讨论】：

更多的是评论而不是答案。至少提供一些资源来支持它。