通过 JavaScript 将表单提交到后台正确的 Post 操作 URL

Question

我有以下表格：

<div id="another"><form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>

  [...]

  <textarea columns="40" rows="4" name='entry[body]' id="statement">
  </textarea>

  <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">

</form></div>

当用户单击 submit 按钮时，我希望首先由脚本处理表单，该脚本将检查 #statement 的内容，然后对 Post 请求背景中的表单。我更喜欢 JavaScript（而不是 jQuery）。

我尝试使用

 document.querySelector('#submitform').addEventListener('submit', function(e) {
   e.preventDefault();
   console.log('attempt');
   // so smth to submit the form in background - what?
 });

但它似乎没有 "catch" 表单，它仍然提交...

我做错了什么？

更新 - html

中有错别字

Answer 1

您的 html 无效删除第一个 </form> 标签。这样所有元素都将与相同的表单相关联。

<form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>
   [...] 
   <textarea columns="40" rows="4" name='entry[body]' id="statement"></textarea>
   <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary"> 
</form>

看到它工作 here

Answer 2

正如我们在评论中推断的那样，代码有效，但提交处理程序在 <form> 完全加载之前绑定。

解决这个问题的一种方法是将代码放在 DOMContentLoaded event. Support for DOMContentLoaded 的侦听器中是相当不错的，只有 IE8 有问题（尽管它也不支持 addEventListener ).

document.addEventListener("DOMContentLoaded", function(event) {
    // ...
});

另一种方法是将 <script> 放在 <form></form> 标签下方。

还有内联 onsubmit=...，但由于各种原因（主要是可维护性），内联 JavaScript 现在被认为是不好的做法。如果您需要支持无法绑定事件的非常旧的浏览器，那么您应该只真正使用它。

至于在 "background" 中提交表单，您可以 use AJAX。有很多很棒的resources/tutorials。

通过 JavaScript 将表单提交到后台正确的 Post 操作 URL

Submit form via JavaScript to the correct Post action URL in the background

javascript

html

forms

form-submit

onsubmit