document.getElementById(“#”).innerHTML = “Hello ” + user + “!”; not working

Question

I have a javascript function as follows:

function userNameEntered() {
var user = document.forms["user"] ["name"].value;
document.getElementById("Name").innerHTML = "Hello " + text + "!";
}

It accesses this <form> :

<form method="get" name="user" onsubmit="userNameEntered()">
<p>Name:</p>
<input type="text" name="name" autocomplete="off" id="username">
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>

When I try it out I see the text implement for less then a second then disappear. Any ideas? I thought it might be because user is not in a global scope, so I tried declaring it before the function, and it didn't even show at all. I'm slightly confused as I can't see any possible problems.

Answer 1

Prevent default form action (which is submit with page reload) by returning false from onsubmit handler ( onsubmit="return userNameEntered()" ). You also need to return false from userNameEntered function.

Then, remember to remove redundant onclick handler (avoid using onclick for form submission) and add element with id="Name" somewhere.

 function userNameEntered() { var user = document.forms["user"]["name"].value; document.getElementById("Name").innerHTML = "Hello " + user + "!"; return false; }

 <form method="get" name="user" onsubmit="return userNameEntered()"> <p>Name: <span id="Name"></span></p> <input type="text" name="name" autocomplete="off" id="username"> <input type="submit" value="Submit" id="usersubmit"> </form>

Also note that you probably want "Hello " + user + "!"; not text .

Answer 2

Use return false in your function

    function userNameEntered() {
    var user = document.forms["user"] ["name"].value;
    document.getElementById("enter code hereName").innerHTML = "Hello " + text + "!";
    return false;
     }

Answer 3

You need to stop the form from being submitted, as the page is being reloaded are the post. This is why you are seeing it briefly, and then it "disappears".

To stop this, you need to stop the form being submitted:

function userNameEntered()  {
    var text = document.forms["user"]["name"].value;
    document.getElementById("name").innerHTML = "Hello " + text + "!"; 
    return false;
}

You also have some errors: your form element is name , but you reference Name , you assign var user but use text .

Answer 4

It's disappearing because the page is reloading after the form is submitted.

To stop this try:

function userNameEntered() {
  var user = document.forms["user"] ["name"].value;
  document.getElementById("Name").innerHTML = "Hello " + text + "!";
  return false;
}

And:

<form method="get" name="user" onsubmit="return userNameEntered()">
  <p>Name:</p>
  <input type="text" name="name" autocomplete="off" id="username">
  <input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>

Answer 5

Clicking on a "Submit" button, prevent default form action is not occurred..due to this values may disappear

<form method="get" name="user" onsubmit="userNameEntered();return false;">
<p>Name:</p>
<input type="text" name="name" autocomplete="off" id="username">
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>


        <script>
            function userNameEntered() {
                debugger;
                var user = document.forms["user"]["name"].value;
                document.getElementById("username").innerHTML = "Hello " + user + "!";
            }
        </script>
or

  $('#usersubmit').click(function (e) {
    e.preventDefault();
    var user = document.forms["user"]["name"].value;
    document.getElementById("username").innerHTML = "Hello " + user + "!";
    });