I've posted some code for a simple form. I have commented out the part of the function that isn't working as I would expect.
When a 'country' is selected from the drop-down menu, the corresponding 'country code' is populated in text fields of the form.
This works (form rows '1' and '2'):
document.forms.myForm.coun
try0.value
= countryCode
This does not work (form rows '3' and '4'):
document.forms.myForm.peop
le[0][coun
try].value
= countryCode
I'd prefer to reference the form elements as in rows 3 and 4 but am uncertain how to reference multidimensional arrays in Javascript.
How should I go about this?
<html>
<head>
<title>People :: Names and Countries</title>
<script type="text/javascript">
<!--
var country = "";
function addCountry(countryCode) {
// This works -- 'country code' IS ADDED to rows 1 and 2
document.forms.myForm.coun
try0.value
= countryCode
document.forms.myForm.coun
try1.value
= countryCode
// This doesn't work -- 'country code' IS NOT ADDED to rows 3 and 4
// document.forms.myForm.peop
le[0][coun
try].value
= countryCode
// document.forms.myForm.peop
le[1][coun
try].value
= countryCode
}
//-->
</script>
</head>
<body>
<form name="myForm" method="post" action="processForm.php">
COUNTRY:
<select name="countryCode" onchange="addCountry(this.
value);">
<option value="" selected>(Select COUNTRY)</option>
<option value="CAN">Canada</option
>
<option value="FRA">France</option
>
<option value="UK">United Kingdom</option>
</select>
<p>
1. NAME:<input type=text name=name0> COUNTRY:<input type=text name=country0><br />
2. NAME:<input type=text name=name1> COUNTRY:<input type=text name=country1><br />
3. NAME:<input type=text name=people[0][name]> COUNTRY:<input type=text name=people[0][country]><b
r />
4. NAME:<input type=text name=people[1][name]> COUNTRY:<input type=text name=people[1][country]><b
r />
</p>
</form>
</body>
</html>
Start Free Trial
