Populate text box with JavaScript on PageLoad

Question

I have a text box called txtName on my form.

In my page I know I need to place the code in my HEAD tag like so......

<script type='text/javascript' language="javascript">

 document.FormName.txtName.value = "Robert";

 </script>

But I cant seem to set a value to my textbox txtName with the above code......

Keeper · Accepted Answer · 2010-05-25 11:43:23Z

5

That's because your code get executed before the DOM is created. You can do something like this

window.onload = function() { 
  document.forms['FormName'].elements['txtName'].value = "Robert";
}

or use JQuery

$(function() {
  document.forms['FormName'].elements['txtName'].value = "Robert";
  // for a shorter syntax use id
  $('#txtNameId').val("Robert");
}

answered May 25, 2010 at 11:43

Keeper

3,5661 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Keeper Over a year ago

Inside a <script> tag. If you want to use the JQuery solution you also have to add a <script> to load jquery. Take a look on its site: jquery.com Double check that your for is <form name="FormName"> and your text is <input name="txtName">. Another syntax you can use (but not a "standard" one) is document.FormName.txtName.value = "Robert"

Etienne Over a year ago

Inside <script> tag yes I know, but must it all go in the <head> tag? Because it still does not work......

Keeper Over a year ago

Ok I see you also use an ID on your text. Place this in your <head> and it must work: <script type='text/javascript' language="javascript"> window.onload = function() { document.getElementById('txtName').value = "Robert"; } </script>

Etienne Over a year ago

There must be something wrong with the window.onload because even when i place a alert in like so alert("Hello World"); it does not want to show the alert....

Keeper Over a year ago

pastebin.com/XPjTUe6Y This works for me. Try to see if you spot any difference/mistake...

|

wassertim · Accepted Answer · 2010-05-25 11:43:35Z

1

Your script executed before page loaded. Use onload event

answered May 25, 2010 at 11:43

wassertim

3,1462 gold badges26 silver badges39 bronze badges

Comments

David Robbins · Accepted Answer · 2010-05-25 14:31:47Z

Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.

UPDATE: You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:

<body>      
    <form>
    <input id="txtName" name="txtaaaName" type="text" value="notnow"/>
    </form>
    <script type="text/javascript">
        function LoadTextBox(){
            document.getElementById("txtName").value = "ready to go";
        }

        LoadTextBox();
    </script>   
</body>

An alternative could be where you use onload in the body tag:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript">
            function LoadTextBox(){
                document.getElementById("txtName").value = "ready to go";
            }
        </script>   
    </head>
    <body onload="LoadTextBox">     
        <form>
        <input id="txtName" name="txtaaaName" type="text" value="notnow"/>
        </form>

    </body>

Collectives™ on Stack Overflow

Populate text box with JavaScript on PageLoad

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related