来自 javascript 事件的表单提交，而不是表单操作答案

【问题标题】：Form submission from javascript event, not form action来自 javascript 事件的表单提交，而不是表单操作
【发布时间】：2021-09-19 05:04:18
【问题描述】：

好的，所以这可能是一个有点令人困惑的问题，但无论如何：我有一个表单，以外部 URL 为目标进行验证。

<form
  id="form1"
  name="form1"
  class="formclass"
  accept-charset="UTF-8"
  autocomplete="off"
  enctype="multipart/form-data"
  method="post"
  novalidate
  action="https://www.external_url.com"
  >

但是，我想在用户单击提交按钮并将表单发送到外部 URL 时做一些事情。基本上，我试图通过从那里删除表单中的操作并创建一个事件处理程序来实现这一点：

button=document.getElementById("SubmitButton");
button.addEventListener('click', submitaction);

function submitaction() {
// Do something and THEN submit it to external URL
}

当我完成“做某事”（例如，可能在发送之前显示警报）时，我想获取整个表单并将其发送到外部。我需要做什么才能完全实现与表单中的操作相同的输出？

谢谢大家！

编辑：

我接受了有关提交事件侦听器的建议。但是，在提交表单之前应进行 AJAX 请求。

form1.addEventListener('submit', function(e) {
    $.ajax({
    type: 'POST',
    url: 'form_submission.php',
    data: {'check_input': input.value}, 
    success: function(response){
    if (response == true){
    alert("Thank you for your inquiry!");
    }
    }
    else {
    alert("Your input entered was incorrect.")
    e.preventDefault();
    }
    }
    }
    );

不知何故，事件监听器只是忽略了我的 AJAX 请求并仍然提交表单。它甚至不显示警报，这非常奇怪。

【问题讨论】：

标签： javascript html forms

【解决方案1】：

删除action 属性不会阻止表单提交，它只会重新加载页面。

您应该在表单上附加一个submit 事件侦听器，并在回调中提交之前添加您希望执行的代码：

form1.addEventListener('submit', function(){
  alert('submit!');
})

<form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <button>submit</button>
</form>

对于有条件的表单提交，Event.preventDefault() 用于阻止表单提交：

form1.addEventListener('submit', function(e) {
  if (!input.value.length > 0) {
    console.log('You have not filled out the input field')
    e.preventDefault();
  }
})

<form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <input id="input">
  <button>submit</button>
</form>

如果您发出 AJAX 请求，您的代码应如下所示：

form1.addEventListener('submit', function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'form_submission.php',
        data: {
            'check_input': input.value
        },
        success: function(response) {
            if (response == true) {
                alert("Thank you for your inquiry!");
                form1.submit();
            }
        }
        else {
            alert("Your input entered was incorrect.")
        }
    })
});

【讨论】：

谢谢！如果我想实现一个“IF”，它会检查一些东西。如果为真，则提交表单。 False 提交被取消，即使用户点击了按钮。
@Soda 我已经更新了答案，让您了解如何添加条件。
您好，感谢您的快速解答！我现在遇到的问题是我正在做一个 ajax 请求这个 java 函数。这个 ajax 请求检查我自己的 PHP 文件中的某些内容。如果响应返回为真，则应提交表单。如果是假的，那就不是。现在，问题是，ajax 花费的时间太长并且被忽略了。无论如何都会提交表单。我将编辑我的原始帖子！
得到true后可以使用$("#form1").submit()
我实现了完全相同的代码，将 e.preventDefault() 放在 AJAX 之前。无论 AJAX 请求的结果如何，提交仍然会触发。警报仍未显示。我错过了什么？

【解决方案2】：

这是一个小sn-p，说明了在提交表单之前使用fetch-post检查输入值。只有输入字段的数值为>0时才会提交表单。

form1.addEventListener('submit', function(e) {
  e.preventDefault();
  fetch("https://jsonplaceholder.typicode.com/users",{
   method: 'POST',
   headers: {'Content-Type':'application/json'},
   body: JSON.stringify({usrVal:input1.value})
  }).then(r=>r.json()).then(o=>{
    if (+o.usrVal>0) form1.submit()
  })
})

<form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <input id="input1">
  <button>submit</button>
</form>

【讨论】：