CODEWITHSUNDEEP
javascripthtmlformsevents
user2206366
user2206366

Reputation: 481

Using addEventListener onSubmit form

I am quite new to HTML and JavaScript. Below is the sample code. The below code block works fine with onsubmit as form tag attribute

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#" onsubmit="functSubmit()">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

  <script>
    function functSubmit(event) {

      var msg = document.getElementById("input1").value;
      alert(msg);
    }
  </script>

</body>    
</html>

But when I write below code with addEventListener() it does not work.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

  <script>
    document.getElementById("form1").addEventListener('submit', functSubmit(event));

    function functSubmit(event) {
      var msg = document.getElementById("input1").value;
      alert(msg);
    }
  </script>

</body>
</html>

Why might addEventListener not be working?

Upvotes: 8

Views: 40646

Answers (3)

Seth
Seth

Reputation: 10454

That's because you're immediately invoking the event listener's callback. Just pass the function as an argument, without invoking it. Anytime the form is submitted, that function will have the event object passed into it. 

document.getElementById("form1").addEventListener('submit', functSubmit);

function functSubmit(event) {
  var msg = document.getElementById("input1").value;
  alert(msg);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Custom Tags</title>
</head>

<body>

  <form id="form1" action="#">
    <label for="input1">This text will be passed in CustomeEvent</label>
    <input id="input1" type="text" value="default">
    <input type="submit" id="bt1">
  </form>

</body>

</html>

On a side note: it's generally better practice to separate the concern of your HTML from your JavaScript. While inlining your event handlers in attributes works, it couples two separate concerns. For maintainability's sake, manage your handlers separately. You also get the benefit of leveraging event delegation.

Upvotes: 20

Nitin
Nitin

Reputation: 916

I think you can only pass a string as function name. You can try

document.getElementById("form1").addEventListener('submit', function(event){
    functSubmit(event);
});

Upvotes: -1

fxfilmxf
fxfilmxf

Reputation: 582

You are invoking functSubmit and passing the result to the addEventListner function.

Instead you want something like this

<form id="form1" action="#" onsubmit="functSubmit()">

or 

document.getElementById("form1").addEventListener('submit',functSubmit);
function functSubmit(event) {
  var msg  = document.getElementById("input1").value;
  alert(msg);
}

event is already passed in by the caller of the functSubmit function.

Upvotes: 1

Related Questions