使用addEventListener方法通过普通javascript提交表单

Question

我希望我们用javascript提交我的html表单。

我尝试两种方法。

第一个对我有好处。

function formSubmit() {
document.getElementById("myForm").submit()
}

<form id="myForm" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input  type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="submit" >
</form>

否则，第二个不能为我工作

window.addEventListener("click",  function(event){

event.preventDefault();
document.getElementById("myForm2").submit() }   

)
});

<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input  type="text" name="lastname" size="20"><br />
<br />
<input type="button"  value="submit" >
</form>

我想做的就是使用addeventlistner方法提交表单

Answer 1

这里有一种方法。

function formSubmit() {
document.getElementById("myForm").submit()
}
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault()
document.getElementById("myForm").submit()
})

<form id="myForm" action="https://google.com" method="get">
First name:
<input type="text" name="firstname" size="20">
<br /> Last name：
<input type="text" name="lastname" size="20"><br />
<br />
<button id="submitBtn" type="button" onclick="formSubmit()">Submit</button>
</form>

Answer 2

您可以使用类似的输入类型

<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="submit" value="submit" >
</form>

并提交相关表单的事件

document.getElementById("myForm2").addEventListener("submit", function() {
console.log("submitted")
})