Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

This seems like it should be relatively straightforward, I cannot figure out what I'm doing wrong. I need to take input (user's name) from the user via textbox, set it as a variable, and display it on the page. I keep getting "undefined" instead of the user's name.

Here's a condensed version. This will display a Div that covers the entire page which contains an input for the user to type their name. when the user hits submit the div disappears and the name is set to a variable. I left the form handling functions in case they are relevant to the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>
<HEAD>
<TITLE>HOME</TITLE>



</HEAD>
<BODY>
<CENTER>
<BR />
<FONT COLOR="RED" FACE="ARIAL BOLD" SIZE="5">test</FONT>
<BR />


<script language="javascript"> 
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var name = uservariable;

function setName(){

    uservariable = document.forms["username"]["user"].value;

    var ele = document.getElementById("nameInput");
    if(ele.style.display == "none") {
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
    document.getElementById('element_7').value = uservariable;

} 

function validateForm()
{
var x=document.forms["username"]["user"].value;
if (x==null || x=="")
  {
  alert("Rembrandt's first name was Beauregard, what is yours?");
  }
else
  {
  setName()
  } 
}

</script>


<DIV id="nameInput" STYLE="background-color:#ccc;position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:1000;display:block;">

<br /><br /><FONT FACE="ARIAL BOLD" SIZE="3">First Name:</font><br />


<form name="username" action="javascript:validateForm()">
<input type="text" name="user" value="" size="20"><br>
<input type="submit" value="Start Shift">
</form> 
</div>


<script language="javascript"> 
document.write(name + "s LEADS SUBMITTED FOR " + month + "/" + day + "/" + year + ":</B>");
</script>
</center></td></tr></table>
</div>



</CENTER>
</BODY>
</HTML>
share|improve this question
The document.write call happens when the page first loads. name is only assigned to uservariable, which is undefined at that time. You should really step through the code with a proper debugger. – Matt Ball Jun 15 '12 at 4:09
@MattBall Look at you with a normal ASCII name. – Dave Newton Jun 15 '12 at 4:10
add comment (requires an account with 50 reputation)

1 Answer

up vote 1 down vote accepted
<head>
  <script>

      function doStuff()
      {
        var nameElement = document.getElementById("someInput");
        var theName = nameElement.value;
        document.getElementById("someDiv").innerHTML += theName;
      }

  </script>
</head>

<html>

  <div id="someDiv">
    Hello
  </div>

  <br><br>

  <input id="someInput" type="text">
  <input type="button" value="Say Hello" onClick="doStuff()">

  <br>    
</html>
share|improve this answer
+1 for avoiding the evil document.write. – AresAvatar Jun 15 '12 at 5:22
thAnk you thank you thank you to matt for pointing out the problem and to jahroy for providing a solution! and so quickly! thank you! – Adelphia Jun 15 '12 at 12:20
yeah! farewell document.write, hello document.getElementById – edouard Mar 27 at 15:55
add comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.