Getting the value of an input field within a form using JavaScript

Question

Can someone help me understand why the console log fails to print the value if I wrap the input field in a form field?

HTML:

  <form>
      <input id="formEntry" type="text">
      <button id="btn-3">Add Custom Line</button>
  </form>

JavaScript:

 var addCustomLine = function(){
      var customLine = document.getElementById("formEntry").value;
      console.log(customLine);
 }

 document.getElementById("btn-3").addEventListener ("click", addCustomLine, false);

What do you mean by "fails if I wrap it in a form"? Are you saying the code works if you omit the <form> tags? — Bergi
– Bergi, Commented Mar 16, 2017 at 23:22

ole · Accepted Answer · 2017-03-16 23:29:32Z

2

By not specifying the button type, it submits the parent form by default. You can prevent this behavior by setting the type explicitly to "button".

<button type="button" id="btn-3">Add Custom Line</button>

answered Mar 16, 2017 at 23:29

ole

512 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergi · Accepted Answer · 2017-03-16 23:23:18Z

0

A <button> in a <form> will submit that form by default, which will cause the page to reloaded and nullify all effects that the event handler had. You can however prevent that behaviour:

function addCustomLine(event) {
    event.preventDefault();
    …
}

You'll want to install that handler on the submit event of the form usually, not the click event of the button.

answered Mar 16, 2017 at 23:23

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Getting the value of an input field within a form using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related