Javascript innerHTML is automatically overwritten and nullified

Question

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.

when forms submit, they load a new page (or the same page if you have no `action` attribute) ... you could `onsubmit="return getFormvalue()"` and `return false` in your function — Bravo, Jul 20 '21 at 07:35
This is because you have used input type submit, and it will post the form to server. If you want to avoid that either don't use submit button or prevent the form from posting by returning the value from getFormValue() — Bharat, Jul 20 '21 at 07:36
Use event.preventDefault() in your getFormvalue() function to prevent the page from reloading. — riorudo, Jul 20 '21 at 07:38
@riorudo That will only work if OP changes `function getFormvalue(){` to `function getFormvalue(event){` first — phuzi, Jul 20 '21 at 07:41

score 1 · Accepted Answer · answered Jul 20 '21 at 07:37

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>

score 1 · Answer 2 · answered Jul 20 '21 at 07:39

You need to prevent form submision

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="event.preventDefault(); 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>

Javascript innerHTML is automatically overwritten and nullified

2 Answers2