javascript - 通过 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?
 });

但它似乎没有“捕获”表单并且仍然提交...

我做错了什么？

更新 - html 中有一个拼写错误

Answer 1

正如我们在注释中推断的那样，代码可以工作，但提交处理程序是在 <form> 之前绑定(bind)的。已满载。

解决此问题的一种方法是将代码放入 DOMContentLoaded 的监听器中。事件。 Support for DOMContentLoaded 相当不错，只有 IE8 有问题(尽管它也不支持 addEventListener)。

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

另一种方法是输入 <script>低于<form></form>标签。

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

至于在“后台”提交表单您可以use AJAX 。有很多很棒的资源/教程。