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

【问题标题】：Execute Javascript function before submitting the form在提交表单之前执行 Javascript 函数
【发布时间】：2018-05-07 15:06:08
【问题描述】：

我有以下执行后端控制器和 JavaScript 函数的 spring 表单，一切正常，但我需要在提交表单之前执行 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();
  });

【问题讨论】：

嗯，这将在提交表单之前运行代码。只是可能没有时间在它提交之前看到它。你到底想达到什么目的？
我不确定我是否理解这一点，但也许您可以在用户单击提交按钮时使用 PreventDefault() 然后调用您的函数，然后根据需要提交表单。
是的，您可以阻止默认设置，然后提交表单。但这仅在您异步执行某些操作时才有用。 OP 没有提到 doSomething() 是什么。但如果它是同步的，它会在表单提交之前运行，但你可能会意识到它已经发生了。
Jquery function BEFORE form submission的可能重复
这也是一个古老的问题，在这个网站和互联网上已经被问和回答了一百万次，例如：stackoverflow.com/questions/21938788/… - 那里的答案通常也比这里好得多

标签： javascript jquery forms spring-mvc

【解决方案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>

【讨论】：

但是表单没有提交
不，$("#form").submit();将递归调用提交处理程序。你应该使用 $( "#form" )[0].submit();例如
另外你返回 false 然后尝试提交，这是无法访问的代码。
如果他要提交表单，代码被注释，然后他可以删除返回false；
您可能已经通过一次单击和一次提交修复了递归性，但这不是一个好主意。如果有人在输入字段中并点击输入怎么办？还是以其他方式提交表单？也许您可以进入提交按钮并按 Enter 键？

【解决方案2】：

你可以试试这个

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

【讨论】：

请不要在您在本网站上给出的每个答案中宣传您的网站。它对社区没有用处，只会被视为纯粹的垃圾邮件。

【解决方案3】：

尝试使用preventDefault Event

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

最后在你的 dosomething() 函数中添加：

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

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

【讨论】：

不，$( "#form" ).submit(); 将递归调用提交处理程序。你应该使用$( "#form" )[0].submit(); 例如
那么你还必须向用户解释使用id而不是class的区别。 ID“必须”是唯一的。
抱歉，我看不到这里关于Id "must" be unique 的意义？哪个重复的 ID？
您正在检查一个事件处理程序，然后您将再次调用它。这将创建一个无限循环。但是，您可以使用变量开关“isSubmitted”，例如，并在事件中进行检查。我以前没有见过[0] 方法，但如果它有效的话，也许会。