CODEWITHSUNDEEP
javascripthtmlforms
Ahmed Abdelkareem
Ahmed Abdelkareem

Reputation: 11

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

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>

Upvotes: 1

Views: 262

Answers (3)

Yordan Nikolov
Yordan Nikolov

Reputation: 2678

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

Upvotes: 0

orabis
orabis

Reputation: 2809

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

Upvotes: 0

Terry
Terry

Reputation: 66103

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:

  1. Use <button type="button"> so that it does not trigger form submission and reloads the page
  2. 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>

Upvotes: 3

Related Questions