使用 addEventListener 方法通过 vanilla 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")
})