在提交表单之前执行Javascript函数

Question

我有以下的Spring表单，它执行后端控制器和JavaScript函数，一切正常，但是我需要在提交表单之前执行JavaScript函数。如何做到这一点？

以下代码会在执行JavaScript之前提交表单。

<form:form modelAttribute="api" id="form">
                <form:textarea path="text" class="form-control" rows="10" id="redacttext"/>
                <button type="submit" class="btn btn-default">Submit</button>
 </form:form>

JavaScript函数

function dosomething() {
 //do something 
}

使用jQuery执行javascript函数

$('#form').submit(function() {
      dosomething();
  });

- Ali-Alrabi

---

嗯，这会在提交表单之前运行代码。可能没有时间在提交之前查看它。你到底想要实现什么？ - Matt Fletcher

我不确定我是否理解正确，但也许你可以在用户点击提交按钮时使用PreventDefault()，然后调用你的函数，如果需要的话再提交表单。 - Oli Crt

是的，您可以阻止默认操作，然后提交表单。但是，只有在执行某些异步操作时才有用。OP没有提到doSomething()是什么。但如果它是同步的，它将在提交表单之前运行，但您可能只会意识到它已经发生了。 - Matt Fletcher

可能是Jquery在表单提交之前执行函数的重复问题。 - Matt Fletcher

此外，这是一个古老的问题，在这个网站和整个互联网上已经被问答了无数次，例如：https://dev59.com/9WEh5IYBdhLWcg3w12ml - 那里的答案通常比这里好得多。 - Matt Fletcher

Answer 1

这是一个工作示例。

$('#submit').on('click',function() {
  dosomething();
 
});

function dosomething() {
  console.log('here');
  //return false;
  // if you want to submit the form here 
  $('#form').submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form:form modelAttribute="api" id="form">
  <form:textarea path="text" class="form-control" rows="10" id="redacttext" />
  <button type="button" id="submit" class="btn btn-default">Submit</button>
</form:form>

- Abid Nawaz

---

但是表单没有被提交。 - A. Wolff

不，$( "#form" ).submit(); 将会递归调用提交处理程序。你应该使用 $( "#form" )[0].submit();，例如。 - A. Wolff

同时，你返回了 false 然后尝试提交，这是无法到达的代码。 - Matt Fletcher

如果他想提交表单，那么可以删除"return false;"，该代码已被注释。 - Abid Nawaz

你可能通过让一个使用点击，另一个使用提交来解决递归的问题，但这不是一个好主意。如果有人在输入字段中按下回车键怎么办？或者表单以其他方式被提交了呢？也许你可以通过Tab键进入提交按钮并按下回车键？ - Matt Fletcher

Answer 2

你可以尝试这个

$("#form").submit(function(e) {
     e.preventDefault();
     ..... do you action/ call custom function
     this.submit();
     return false; //I put it here as a fallback
});

- thiyagu selvaraj

---

请不要在本站的每个回答中推广您的网站。这对社区没有用处，只会被视为纯粹的垃圾邮件。 - Matt Fletcher

Answer 3

尝试使用“preventDefault事件”（preventDefault Event）。

$('#form').submit(function(e) {
      e.preventDefault();
      dosomething();
  });

在您的dosomething()函数末尾添加以下内容：

$( "#form" ).submit();

这将首先运行您的dosomething()函数，然后通过该函数提交表单。

- zagzter

---

不，$( "#form" ).submit(); 会递归调用提交处理程序。你应该使用 $( "#form" )[0].submit();，例如： - A. Wolff

然后，您还必须向用户解释使用id而不是class的区别。Id“必须”是唯一的。 - zagzter

抱歉，我不清楚这里关于“Id必须唯一”的重点在哪里？是指哪个重复的Id？ - A. Wolff

你正在检查一个事件处理程序，之后你将再次调用它。这将创建一个无限循环。但是，你可以使用一个变量开关 "isSubmitted"，例如，在事件中检查它。我以前没有见过 [0] 方法，但也许它能够工作。 - Matt Fletcher