• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2018
  • Last Modified:

Multidimensional arrays in Javascript

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.country0.value = countryCode

This does not work (form rows '3' and '4'):
  document.forms.myForm.people[0][country].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.country0.value = countryCode
    document.forms.myForm.country1.value = countryCode
   
    // This doesn't work -- 'country code' IS NOT ADDED to rows 3 and 4
    // document.forms.myForm.people[0][country].value = countryCode
    // document.forms.myForm.people[1][country].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]><br />
4. NAME:<input type=text name=people[1][name]> COUNTRY:<input type=text name=people[1][country]><br />
</p>
</form>
</body>
</html>
0
speyfisher
Asked:
speyfisher
  • 3
1 Solution
 
b0lsc0ttIT ManagerCommented:
I don't see an array, or at least a Javascript array.  Fields 3 and 4 have a name that uses a bracket but that doesn't make it a Javascript array.  The brackets may cause problems for Javascript to access it but try ...

    document.forms.myForm.elements["people[0][country]"].value = countryCode
    document.forms.myForm.elements["people[1][country]"].value = countryCode

Let me know how that works or if you get an error.

bol
0
 
b0lsc0ttIT ManagerCommented:
If that doesn't work then can you either put the name value in quotes (e.g. name="people[0][name]") or use a different name (one without brackets)?

bol
0
 
speyfisherAuthor Commented:
The first comment got it going by using '.elements[]'

i.e.
    document.forms.myForm.elements["people[0][country]"].value = countryCode

The second comment-- (var name="...)  value in quotes didn't do it.  Using a different name without brackets worked fine in the example but I'd prefer the POST data sent to the php script be accessible something like: $country = $_POST['people'][$i]['country'];

Thanks bol!
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad the first worked then.  I have had issues before but I was pretty confident elements[] would be a way to do it.

Thanks for the grade, the points and the fun question.

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now