使用 addEventListener 方法通过 vanilla javascript 提交表单答案

【问题标题】：Form submit by vanilla javascript using addEventListener method使用 addEventListener 方法通过 vanilla javascript 提交表单
【发布时间】：2022-01-19 07:24:06
【问题描述】：

我希望我们通过 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 方法提交表单

【问题讨论】：

用document.querySelector('#myForm2")代替window，用click代替click

标签： javascript html forms

【解决方案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>

【讨论】：

【解决方案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")
})

【讨论】：