How do I load values into input text fields once the page is loaded?

Question

Right now I'm trying out the following code, but nothing will appear in any of my input text boxes on page load.

HTML:

<body onload="test()">
<input type="text" id="line0"></input>
<br>
<input type="text" id='line1'></input>
<br>
<input type="text" id='line2'></input>
</body>

Javascript:

function test() {
    var value = "test|some|thing";
    var valueArray = value.split("|");
    for (var lineNumber=0; lineNumber < valueArray.size(); lineNumber++) 
    {
        line = "line" + lineNumber;
        document.getElementById(line).value = valueArray[lineNumber];
    }
}

JFiddle: http://jsfiddle.net/mWL9m/1/

In my actual code, I will be bringing in a value from outside the function, but that isn't really important. Right now I'm just using the test value value.

I've looked at several different threads, but all seem to be focused on onclick rather than onload.

The answer lies here: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready — Diodeus - James MacFarlane, Jul 17 '14 at 17:38
Your html markup is wonky, input elements and br are self-closing. — Rodrigo, Jul 17 '14 at 17:41

score 1 · Answer 1 · answered Jul 17 '14 at 17:50

1

<script>
document.onreadystatechange = function() 
{
    Javascript code goes here
}
</script>

or

<script>
window.onload = function()
{
    Javascript code goes here
}
</script>

answered Jul 17 '14 at 17:50

k.rozycki

635
1
5
12

Rodrigo · Answer 2 · 2014-07-17T17:52:02.810

Updated your fiddle, here is the code.

(function(){ //This replaces the onload by executing the code within this annonymous function once the page loads.
var value = "test|some|thing";  //No edits here
var lineNumber = 0; //No edits here
var valueArray = value.split("|");
for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) { //using .length instead of size and initialized lineNumber again, mostly because I like to keep my initialization in the loop, personal preference.
    var lineid = "line" + lineNumber; // It was missing "var", changed the variable name too
    var currentLine = valueArray[lineNumber];  //same deal
    var inputElem=document.getElementById(lineid); //I get the element before accessing the value property, again, preference mostly
    inputElem.value = currentLine; //same code.
} //End of for loop
})(); //end of the annonymous function

This fixes the issue, but I agree with filoxo, a short explanation would be very helpful! — tmothy07, Jul 17 '14 at 17:49

score 0 · Accepted Answer · answered Jul 17 '14 at 17:44

You are using the wrong property to get the size of the array. User .length instead of .size().

Example: http://jsfiddle.net/u2g2p/1/

function test() {
    var value = "test|some|thing";
    var valueArray = value.split("|");
    for (var lineNumber=0; lineNumber < valueArray.length; lineNumber++) 
    {
        line = "line" + lineNumber;
        document.getElementById(line).value = valueArray[lineNumber];
    }
}

score 0 · Answer 4 · edited May 23 '17 at 12:29

There are 2 issues with your fiddle. The first is that you should use length instead of size() to get the length of your array (I don't believe there is a built-in size method for Javascript arrays):

for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) {

And the second is that because of the declaration scope of your test function, it's not being found on load. Read this:

JavaScript not running on jsfiddle.net

And change

function test() {

To this:

window.test = function() {

score 0 · Answer 5 · answered Jul 17 '14 at 18:30

It's .length for the number of objects in an array.

/*Javascript*/

function test(){
    var testVal = "test|some|thing";
    testValArr = testVal.split('|');

    for (i = 0; i < testValArr.length; i++) { 

     document.getElementById('line' + i).value = testValArr[i];
  }
}

How do I load values into input text fields once the page is loaded?

5 Answers5