jquery 使用JavaScript事件侦听器提交表单时出现问题

dced5bon 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(109)

我有一个表单，其中有一个事件侦听器附加到submit事件。在事件侦听器中，我将执行一些验证，然后尝试以编程方式提交表单。但是，我在触发表单提交时遇到了困难
下面是相关的代码片段：

Pasteform.addEventListener("submit",(e)=>{
  e.preventDefault();
  content.value = editor.getValue();

  if(title.value.trim().length === 0){
    title.value = "Not Title";
  }
  if(description.value.trim().length === 0){
    description.value = "Not Description";
  }
  if(content.value.trim().length === 0){
    error.innerHTML = "<p class='text-danger'>Content Can't Be Empty</p>";
  }else{
    Pasteform.submit();
    e.submit();
  }
});

字符串
在上面的代码中，我使用e.preventDefault()成功地阻止了默认表单提交。但是，当我尝试使用Pasteform.submit()或e.submit()以编程方式提交表单时，它会抛出一个错误，指出未定义submit。
我已经检查了Pasteform引用了正确的form元素，其他代码似乎都能正常工作。
我的方法中是否遗漏了什么？如何在事件侦听器中以编程方式提交表单？

jquery

来源：https://stackoverflow.com/questions/76693604/issue-with-form-submission-using-javascript-event-listener

1条答案

按热度按时间

0h4hbjxa1#

问题是因为e是引发的Event对象。它没有submit()方法。
您需要在form元素上调用submit()，该元素可以从e.target属性获得：

e.target.submit();

字符串
也请注意，你的逻辑似乎有缺陷。对title和description的前两次有效性检查不会影响表单提交。只有content的状态可以。您需要重新安排您的逻辑，以检查 * 所有 * 字段是否有效。下面是一个完整的例子：

Pasteform.addEventListener("submit", e => {
  e.preventDefault();
  let formValid = true;

  if (title.value.trim().length === 0) {
    title.value = "Not Title";
    formValid = false;
  }
  
  if (description.value.trim().length === 0) {
    description.value = "Not Description";
    formValid = false;
  }
  
  content.value = editor.getValue();
  if (content.value.trim().length === 0) {
    error.innerHTML = "<p class='text-danger'>Content Can't Be Empty</p>";
    formValid = false;
  } 
  
  if (formValid) {
    e.target.submit();
  }
});

型

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 使用JavaScript事件侦听器提交表单时出现问题

1条答案

相关问题

热门标签

最新问答