提交按钮仅在对输入文本调用 onchange 后的第二次单击时起作用答案

【问题标题】：submit button works only on 2nd click after onchange called on input text提交按钮仅在对输入文本调用 onchange 后的第二次单击时起作用
【发布时间】：2016-05-04 09:39:37
【问题描述】：

我有输入文本字段，用户可以在其中提供一些详细信息，并且在更改文本字段时，调用 ajax 函数来保存数据。当用户在文本字段中写入内容并单击提交按钮时，它会调用 ajax 函数但不会同时提交表单。它在第二次点击后提交。我想如果用户提供一些输入并单击表单提交，应该首先触发 ajax，然后应该提交该表单，而无需再单击一次。下面是示例代码：

<form:form name ="samplename" action="submitAction">
<form:textarea id="testID" onchange="ajaxmehtod()"></form:textarea>
<input type="button" value="submit">
</form:form>

【问题讨论】：

你能分享你的jQuery吗？
可以提供ajaxmehtod功能吗？

标签： javascript jquery ajax spring jsp

【解决方案1】：

您可以使用“onclick”方法（例如 submitForm()）创建常规按钮，而不是输入类型的按钮提交。同时删除 textarea 上的“onchange”方法。

然后当点击按钮时，在 javascript 中检查 textarea 是否包含任何数据，然后执行 ajaxmethod()，当 ajax 准备好时，使用 $('#samplename').submit(); 触发表单提交；

<form id="sampleName" name ="sampleName" action="">
   <textarea id="testID" name="textAreaName"></textarea>       
</form>

<button onclick="submitForm()"></button>

在javascript中：

  function submitForm(){
    //Check textarea contains data
    ....

   // Execute ajax method
    ajaxMethod();

   // If ajax method is done, submit form
   $('#sampleName').submit();          
  }

类似的东西？

您还可以阻止默认提交操作，更多信息：https://api.jquery.com/submit/

【讨论】：

我希望在更改文本字段时调用 ajax 函数，即使用户没有点击提交。这就是为什么 onchange 写在文本字段上的原因。
onchange 仅在 textarea 失去焦点时触发（模糊并且某些内容已更改）。因此，如果您在文本区域之外单击，那么它只会触发 ajaxmethod。您可以尝试将“keydown”事件与超时一起使用。因此，如果用户输入了一些文本，并且经过了指定的时间，那么指定的函数就会被执行。在 ajax 方法中，您可以手动触发表单提交，如上所述。
当文本区域失去焦点并且当用户在文本区域写入数据后点击提交时触发 onchange 事件，但不会触发为提交功能编写的操作。如何同时触发这两个事件？
我建议创建一个新函数，然后在 onchange（文本区域）和/或 onclick（提交按钮）中调用该函数。在这两种情况下（单击和更改），都会触发该功能。

【解决方案2】：

尝试输入类型提交而不是按钮

<form id="sampleName" name ="sampleName" action="" onsubmit="ajaxmehtod()">
   <textarea id="testID" name="textAreaName"></textarea>   
   <input type="submit" value="submit">
</form>

这将在提交时提交您的表单，并且您需要它 onblur of textarea 您可以添加

<textarea id="testID" name="textAreaName" onblur="somefunction()"></textarea>

【讨论】：

我尝试使用“提交”而不是按钮以及模糊事件，但两者都不适合我。请建议是否可以尝试其他任何方法