Looping through array to fill form input values

JavaScript
1

Can anybody advise where I am going wrong here?

I have an HTML form with the name “frm” and 3 text inputs named:

“example1”
“example2”
“example3”

The script below should assign the values “A”, “B” and “C” respectively to “example1”, “example2” and “example3”.


var examplearray = {};
examplearray.example1 = "A";
examplearray.example2 = "B";
examplearray.example3 = "C";

for(x in examplearray) {
	document.frm.x.value = examplearray[x];
	}

I don’t think I am far away - hopefully this is just a small syntax issue.

Thanks.

2 

//document.frm.x.value = examplearray[x];
document.frm[x].value = examplearray[x];
3

Thanks Paul.

No joy though. :frowning:

Isn’t ‘frm’ like saying frm is an array and ‘x’ is it’s value?

Infact ‘frm’ is just the name of the form.

4

If your script is in the head of the document, then it’s running before the form elements in the body even exist. Place the script at the end of the body, just before the </body> tag.

Here’s some working test code:


<html>
<head>
<title>Test</title>
</head>
<body>
<form name="frm">
	<input type="text" name="example1">
	<input type="text" name="example2">
	<input type="text" name="example3">
</form>
<script language=javascript>
var examplearray = {};
examplearray.example1 = "A";
examplearray.example2 = "B";
examplearray.example3 = "C";
 
for(x in examplearray) {
    document.frm[x].value = examplearray[x];
}
</script>
</body>
</html>
5

Many Thanks Paul. :slight_smile:

6

On a similar subject, the below script clears the value of text input if the value is set to it’s corresponding array key.

The problem seems to be here: examplearray[id]. Is it possible to use the id argument when it’s value is this? Or does it have to take the name attribute as a string?

Thanks in advance.


var examplearray = {};
examplearray.example1 = "A";
examplearray.example2 = "B";
examplearray.example3 = "C";

<input type="text" name="example1" onFocus="clear_textbox(this)"/>

function clear_textbox(id)
{
	if (id.value == examplearray[id])
	id.value = "";
}
7

The value being passed to the function is not an id string, instead it’s a reference to the element itself so it really should be called el instead of id for the function argument.

You can then use el.name to get the array reference.


function clear_textbox(el)
{
    if (el.value == examplearray[el.name]) {
        el.value = "";
    }
}
8

I see. So in this case, what does this literally equal? Would it be the full name reference ‘document.frm.example1’?

Thanks once again Paul - I am learning a lot here.

9

If it was the example1 field that was clicked on, then yes, it would refer to document.frm.example1

In terms of what the this keyword literally equals, it’s better to think of it as being the actual element that fired off the event, the one on which the onclick attribute is attached.

References such as the this keyword, document.frm.example1, and even
document.getElementsByName(‘frm’)[0].elements[‘example1’] are all just ways of getting you to the element that’s on the page.