表单提交来自javascript事件，而不是表单动作

Question

好，这可能是一个有点令人困惑的问题，但无论如何:我有一个表单，目标是一个外部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请求，仍然提交表单。它甚至不显示警报，这是超级奇怪的。

Answer 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.")
}
})
});

Answer 2

这是一个小代码片段，演示了在提交表单之前使用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>