vanilla javascript 使用 addEventListener 方法提交表单

Question

I want us javascript to submit my html form.

I try two method.

The first one is good for me.

  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>

otherwise,the second one can not work for me

    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>

All i want to do is to use addeventlistner method to submit form

Answer 1

Here is a way to do it.

 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

You can use input type like this

<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>

and submit event for related form

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