Form submit by vanilla javascript using addEventListener method-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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")
})