Why does this JavaScript delete everything after it successfully copies the input value to the element text

Question

When i write my code like bellow, the text in the input field appears in the p element for a second and then it vanishes. And when i remove the form tags the text stays in the p element. Why this happens?

        <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Hello World</title>
      </head>
      <body>
        <form>
          <input type="text" id="txbox" placeholder="enter your name here">
          <button id="btn">click</button>
        </form>
    
        <p id="app"></p>
    
        <script>
          function put() {
            var txt = document.getElementById('txbox').value;
            document.getElementById('app').innerHTML= txt;
          }
    
          var mybtn = document.getElementById('btn');
          mybtn.addEventListener("click", put);
        </script>
      </body>
    </html>

Possible duplicate of [How to prevent buttons from submitting forms](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Heretic Monkey, May 17 '17 at 20:52

score 3 · Answer 1 · answered May 17 '17 at 20:52

That is because you are actually submitting your form when you click on the button. Removing the <form> tag means that the button will no longer submit a form, because there is none. That is, of course, often far from the ideal solution. There are two alternative solutions:

Use <button type="button"> so that it does not trigger form submission and reloads the page
Use event.preventDefault on the click event listener to stop the button submission action from being triggered

Proof-of-concept for solution 1:

function put() {
  var txt = document.getElementById('txbox').value;
  document.getElementById('app').innerHTML = txt;
}

var mybtn = document.getElementById('btn');
mybtn.addEventListener("click", put);

<form>
  <input type="text" id="txbox" placeholder="enter your name here">
  <button id="btn" type="button">click</button>
</form>

<p id="app"></p>

Proof-of-concept for solution 2:

function put(event) {
  var txt = document.getElementById('txbox').value;
  document.getElementById('app').innerHTML = txt;
  
  event.preventDefault();
}

var mybtn = document.getElementById('btn');
mybtn.addEventListener("click", put);

<form>
  <input type="text" id="txbox" placeholder="enter your name here">
  <button id="btn">click</button>
</form>

<p id="app"></p>

score 0 · Answer 2 · answered May 17 '17 at 20:53

Because you wrap your input in a form tag. So, the data will be submitted. If you would like to avoid this behaviour, you need to remove the form tag, and get its content out of it

<body>
    <input type="text" id="txbox" placeholder="enter your name here">
      <button id="btn">click</button>

    <p id="app"></p>
.....

score 0 · Answer 3 · answered May 17 '17 at 20:54

Because you are submiting the form, each time when you click on the button, to prevent the submitting add this.

function put(ev) {
   ev.preventDefault(); // to prevent submit of the form
    var txt = document.getElementById('txbox').value;
    document.getElementById('app').innerHTML= txt;
  }

  var mybtn = document.getElementById('btn');
  mybtn.addEventListener("click", put);

Why does this JavaScript delete everything after it successfully copies the input value to the element text

3 Answers3