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的内容，然后在背景即可。我更喜欢用JavaScript（而不是jQuery）来做。

我尝试使用

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

但似乎没有＆＃34;赶上＆＃34;表格，它仍然提交......

我做错了什么？

更新 - 在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事件的侦听器中。 Support for DOMContentLoaded相当不错，只有IE8有问题（尽管它不支持addEventListener）。

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

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

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

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

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

2 个答案: