Search code examples
javascripthtmlformsfunctioninnerhtml

Javascript innerHTML is automatically overwritten and nullified

I was just practising HTML DOM and Forms, and I wrote a simple code, in which we take values from the form and display them in a <p> tag :

<html>

<head>
    <title>Return first</title>
</head>

<body>
    <p id="demo">hi</p>

    <form id="myForm" name="myForm" onsubmit="getFormvalue()">
        First name: <input type="text" name="fname" value="David"><br>
        Last name: <input type="text" name="lname" value="Beckham"><br>
        <input type="submit" value="Submit">
    </form>


    <script>
        function getFormvalue() {
            var x = document.getElementById("myForm");
            var text = "";
            for (var i = 0; i < x.length; i++) {
                if (x.elements[i].value != 'Submit') {
                    text += x.elements[i].value + " ";
                }
            }
            document.getElementById("demo").innerHTML=text;
        }
    </script>

</body>

</html>

The problem is that when I press submit, the "hi" is replaced by " David Beckham " just for a millisecond, and is again changed to "hi". So by pressing submit continuously, I can see the text being changed again and again.

I don't understand what is happening, It is working, but it is not working. I don't see any errors in the code. Maybe it's code-related, or browser-related, or machine-related.

        function getFormvalue() {
            var x = document.getElementById("myForm");
            var text = "";
            for (var i = 0; i < x.length; i++) {
                if (x.elements[i].value != 'Submit') {
                    text += x.elements[i].value + " ";
                }
            }
            document.getElementById("demo").innerHTML=text;
        }
<html>

<head>
    <title>Return first</title>
</head>

<body>
    <p id="demo">hi</p>

    <form id="myForm" name="myForm" onsubmit="getFormvalue()">
        First name: <input type="text" name="fname" value="David"><br>
        Last name: <input type="text" name="lname" value="Beckham"><br>
        <input type="submit" value="Submit">
    </form>

</body>

</html>

I don't why, but it is working in this snippet, but now in my browsers. I am using Macbook Air. I tried running it on both Safari and Chrome. Any help would be appreciated.

Solution

  • That is because onsubmit it will submit the form and refresh the form. So stop the default behaviour using event.preventDefault

    function getFormvalue(e) {
  e.preventDefault();
  var x = document.getElementById("myForm");
  var text = "";
  for (var i = 0; i < x.length; i++) {
    if (x.elements[i].value != 'Submit') {
      text += x.elements[i].value + " ";
    }
  }
  document.getElementById("demo").innerHTML = text;
}
    <p id="demo">hi</p>

<form id="myForm" name="myForm" onsubmit="getFormvalue(event)">
  First name: <input type="text" name="fname" value="David"><br> Last name: <input type="text" name="lname" value="Beckham"><br>
  <input type="submit" value="Submit">
</form>