Two dimensional array help output a value

Question

I have a form where users can ship pallets for fixed costs depending on their location. Currently this is for UK and France. For each country they are spilt up into 4 zones.

So we have a table like this:

enter image description here

I was thinking the best way to do this is to create a two dimensional array like this somehow:

var values = array[
        [1][1] = 20,
        [1][2] = 25,
        [1][3] = 35,
        [1][4] = 40,

        [2][1] = 36,
        [2][2] = 42,
        [2][3] = 50,
        [2][4] = 56,

        [3][1] = 42,
        [3][2] = 56,
        [3][3] = 52,
        [3][4] = 68,

        [4][1] = 60,
        [4][2] = 70,
        [4][3] = 68,
        [4][4] = 72,
    ]

So ideally if a user selects UK Zone 1 (Radio Button) then Selects France Zone 3 (Radio Button) the output value will be 35.

Form:

<form id="uk_zones">
    <div><input type="radio" name="uk_zone1" value="1">UK zone 1</div>
    <div><input type="radio" name="uk_zone2" value="2">UK zone 2</div>
    <div><input type="radio" name="uk_zone3" value="3">UK zone 3</div>
    <div><input type="radio" name="uk_zone4" value="4">UK zone 4</div>
</form>

<br />


<form id="fr_zones">
    <div><input type="radio" name="fr_zone1" value="1">France zone 1</div>
    <div><input type="radio" name="fr_zone2" value="2">France zone 2</div>
    <div><input type="radio" name="fr_zone3" value="3">France zone 3</div>
    <div><input type="radio" name="fr_zone4" value="4">France zone 4</div>
</form>

The problem I am having is how to output this to the user? Is using a two dimensional array correct? Or am I completely going the wrong direction?

JsFiddle :

http://jsfiddle.net/barrycorrigan/ZXHbq/

score 0 · Answer 1 · edited Dec 12 '13 at 15:51

You are going in a right way,but you need to give same name for radio buttons that your intended to group them so the first group of radio buttun becomes like this

enter code here

<form id="uk_zones">
  <div><input type="radio" name="uk_zone1" value="1">UK zone 1</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="2">UK zone 2</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="3">UK zone 3</div>`<br />`
  <div><input type="radio" name="uk_zone1" value="4">UK zone 4</div>`<br />`
</form>

Similarly you have to modify second one.

and to display the value from array use this code in javascript

var index1 = document.querySelector('input[name="uk_zone1"]:checked').value;
var index2 = document.querySelector('input[name="fr_zone1"]:checked').value;
array[index1][index2]

Cool thanks, only thing is I am really new to JavaScript. I'm struggling a little. Using your code how would I display this to the user. — Barry Corrigan, Dec 12 '13 at 15:32
I was thinking a disabled text field. But not sure how to do this using your example. — Barry Corrigan, Dec 12 '13 at 15:33

score 0 · Accepted Answer · answered Dec 12 '13 at 15:31

You'll want to change your array definition to the following:

var values = [[20,25,35,40],[36,42,50,56],[42,56,52,68],[60,70,68,72]];

That's the syntax for a 2-dimensional array (AKA an array of arrays).

You also need to make sure that all of your radio buttons in a group have the same name, in this case uk_zone and fr_zone

Once you've done that, you need to remember that array indices are 0-based, so you should either change your values on the radio buttons to 0 to 3, OR you can grab the value and subtract by 1 before applying it to your array to retrieve the correct value:

var ukValue = document.querySelector('input[name="uk_zone"]:checked').value;
var frValue = document.querySelector('input[name="fr_zone"]:checked').value;

if(ukValue && frValue)
{
    alert(values[ukValue-1][frValue-1]);
}

You can place the above code in a function called updateValue and then set that to the onChange listener for each of your forms:

<form id="uk_zones" onChange="updateValue();">
    <div><input type="radio" name="uk_zone" value="1">UK zone 1</div>
    <div><input type="radio" name="uk_zone" value="2">UK zone 2</div>
    <div><input type="radio" name="uk_zone" value="3">UK zone 3</div>
    <div><input type="radio" name="uk_zone" value="4">UK zone 4</div>
</form>

<br />


<form id="fr_zones" onChange="updateValue();">
    <div><input type="radio" name="fr_zone" value="1">France zone 1</div>
    <div><input type="radio" name="fr_zone" value="2">France zone 2</div>
    <div><input type="radio" name="fr_zone" value="3">France zone 3</div>
    <div><input type="radio" name="fr_zone" value="4">France zone 4</div>
</form>

Excellent, thanks for this it is now working with the alert, but I get this error - Uncaught TypeError: Cannot read property 'value' of null any ideas? — Barry Corrigan, Dec 12 '13 at 16:19
are you sure you named all of your radio buttons either 'uk_zone' or 'fr_zone'? If not, that would explain the issue. — Marcela, Dec 12 '13 at 16:23
Got it it was not adding a , at the end of the array. If I where to take out the alert function and just have it populate the text box would that be simple to do.. Thanks for all the help — Barry Corrigan, Dec 12 '13 at 16:27

score 0 · Answer 3 · edited Dec 12 '13 at 15:49

use this javascript

 function didplay() {
   var index1 = document.querySelector('input[name="uk_zone1"]:checked').value;
   var index2 = document.querySelector('input[name="fr_zone1"]:checked').value;
   document.getElementById("text1").style.visibility = "visible";
   document.getElementById("text1").value = array[index1][index2]
 }

include text box within a body tag

<input type="text" id="text1" style="visibility:hidden" />

you call this method when user clicks on the button

Two dimensional array help output a value

3 Answers3