Using JavaScript to set the value of a form element

Question

I am currently trying to learn JavaScript and in a particular excercise, I am trying to set the value of a button from a user input, but I keep getting an empty value. Where did I go wrong?

<html>
    <head>
        <title>JavaScript Variables</title>
        <script type="text/javascript">
         FIRST_NAME = window.prompt("Enter your first name.");
         document.forms[0].username.value = FIRST_NAME;
        </script>
    </head>
    <body>
        <form id="myForm">
            <input type="button" value="Paul"
              onclick="alert('Paul');"/>
            <br/><br/>
            <input type="button" value="John"
              onclick="alert('John');"/>
            <br/><br/>
            <input type="button" value="George"
              onclick="alert('George');"/>
            <br/><br/>
            <input type="button" value="Ringo"
              onclick="alert('Ringo');"/>
            <br/><br/>
            <input type="button" id="username" name="username" value=''
              onclick="alert(FIRST_NAME);"/>
    </body>
</html>

The error I get is:

Uncaught TypeError: Cannot read property 'username' of undefined

Its basically the timing of rendering script.Try to place script at the bottom of the body and try.It should work — GustyWind
– GustyWind, Commented Jun 22, 2011 at 5:14

Asaph · Accepted Answer · 2011-06-22 05:17:20Z

The problem is that when the contents of the <script> element are executed, the browser has not yet loaded/rendered the referenced form. Try moving the contents of the <script> element into a function and calling that function on the onload event.

<html>
    <head>
     <title>JavaScript Variables</title>
     <script type="text/javascript">
      function init() {
          var FIRST_NAME = window.prompt("Enter your First Name.");
          document.forms[0].username.value = FIRST_NAME;
      }
     </script>
    </head>
    <body onload="init();">
    <form id="myForm">
     <input type="button" value="Paul"
       onclick="alert('Paul');"/>
     <br/><br/>
     <input type="button" value="John"
       onclick="alert('John');"/>
     <br/><br/>
     <input type="button" value="George"
       onclick="alert('George');"/>
     <br/><br/>
     <input type="button" value="Ringo"
       onclick="alert('Ringo');"/>
     <br/><br/>
     <input type="button" id="username" name="username" value=""
       onclick="alert(this.value);"/>
    </body>
</html>

Peter Mortensen · Accepted Answer · 2012-08-18 03:34:28Z

3

When shot the prompt, any elements is not loaded. You should do it after loaded.

<html>
    <head>
        <title>JavaScript Variables</title>
        <script type="text/javascript">
            window.onload = function() {
                FIRST_NAME = window.prompt("Enter your first name.");
                document.forms[0].username.value = FIRST_NAME;
            }
        </script>
    </head>
    <body>
        <form id="myForm">
            <input type="button" value="Paul"
              onclick="alert('Paul');"/>
            <br/><br/>
            <input type="button" value="John"
              onclick="alert('John');"/>
            <br/><br/>
            <input type="button" value="George"
              onclick="alert('George');"/>
            <br/><br/>
            <input type="button" value="Ringo"
              onclick="alert('Ringo');"/>
            <br/><br/>
            <input type="button" id="username" name="username" value=''
              onclick="alert(FIRST_NAME);"/>
    </body>
</html>

edited Aug 18, 2012 at 3:34

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 22, 2011 at 5:11

mattn

7,77333 silver badges54 bronze badges

1 Comment

Asaph Over a year ago

onclick="alert(FIRST_NAME);" is broken in this example.

Peter Mortensen · Accepted Answer · 2012-08-18 03:38:45Z

2

Place the script after the HTML element so that when the script is executed, it really has a DOM element to set value to. Try this code, it will tell you what document.forms[0] is when you are trying to access it.

<html>
    <head>
        <title>JavaScript Variables</title>

        <script type="text/javascript">
           alert(typeof document.forms[0]);
        </script>
    </head>
    <body>
        <form id="myForm">
            <input type="button" value="Paul"
                   onclick="alert('Paul');"/>
            <br/><br/>
            <input type="button" value="John"
                   onclick="alert('John');"/>
            <br/><br/>
            <input type="button" value="George"
                   onclick="alert('George');"/>
            <br/><br/>
            <input type="button" value="Ringo"
                   onclick="alert('Ringo');"/>
            <br/><br/>
            <input type="button" id="username" name="username" value=''
                   onclick="alert(FIRST_NAME);"/>

            <script type="text/javascript">
                FIRST_NAME = window.prompt("Enter your first name.");
                document.forms[0].username.value = FIRST_NAME;
            </script>
    </body>
</html>

But a good way of doing it would be to create a function and call its BODY's onload method. Just replace you BODY tag with <body onload="document.forms[0].username.value = window.prompt('Enter your first name.');"> and see what happens (of course, remove all other code that you put in to do the same).

edited Aug 18, 2012 at 3:38

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 22, 2011 at 5:12

Praveen Lobo

7,2072 gold badges31 silver badges43 bronze badges

2 Comments

Praveen Lobo Over a year ago

if you were worried about FIRST_NAME, it is global.

Asaph Over a year ago

If you don't like global variables, see my answer.

Teddy · Accepted Answer · 2014-02-23 18:24:48Z

0

Looks like the form tag is not closed. So, maybe there is no valid form in the page and hence document.forms[0] is undefined.

Before the close-body tag, add a close-form tag.

edited Feb 23, 2014 at 18:24

answered Feb 23, 2014 at 18:09

Teddy

4,3333 gold badges38 silver badges65 bronze badges

Collectives™ on Stack Overflow

Using JavaScript to set the value of a form element

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related