CODEWITHSUNDEEP
javascriptjqueryhtml
tmothy07
tmothy07

Reputation: 13

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

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.

Upvotes: 1

Views: 3425

Answers (5)

masher
masher

Reputation: 16

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];
  }
}

Upvotes: 0

Rodrigo
Rodrigo

Reputation: 334

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

Upvotes: 0

k.rozycki
k.rozycki

Reputation: 635

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

or 

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

Upvotes: 1

oliakaoil
oliakaoil

Reputation: 1699

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() {

Upvotes: 0

Milan
Milan

Reputation: 136

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];
    }
}

Upvotes: 0

Related Questions