How do I get a user's input values into a JS array?

I'm adding the ability for the user to input his own values into 6 input fields, some or all of which may be left blank. I already have an array populated with default values. How do I get the user's values into that array so the calculations will be performed on it?

The user can use the supplied values or enter in his own values. The supplied values section works fine. I am now adding the ability for the user to add own values (lower part of HTML).

        <table border="0" cellpadding="5" cellspacing="0" width="100%">
            <tr>
                <td class="alignright">
                    <form id="form2">
                        <select class="displayLength" name="ratio" size="6">
                            <option value=''>Choose:</option>
                            <option value='sc10_4x4'>SC10 4x4: 58, 60, 62, 93</option> 
                            <option value='sc10'>SC10: 75, 78, 81, 84, 87</option> 
                            <option value='sc8'>SC8: 50, 52, 54</option> 
                            <option value='b44'>B44: 72, 75, 78, 81, 84</option> 
                            <option value='b4t4'>B4, T4: 72, 75, 78, 81, 84, 87</option> 
                            <option value='gt2'>GT2: 54, 55, 56</option> 
                        </select>
                </td></tr>

// THIS PART IS NEW:

                <tr><td>
                Alternate spur values:<br><br>
                <input class="display" type="number" size="14" value="" name="spur1">&nbsp;
                <input class="display" type="number" size="14" value="" name="spur2">&nbsp;
                <input class="display" type="number" size="14" value="" name="spur3"><br><br>
                <input class="display" type="number" size="14" value="" name="spur4">&nbsp;
                <input class="display" type="number" size="14" value="" name="spur5">&nbsp;
                <input class="display" type="number" size="14" value="" name="spur6">
                </td></tr>
            <tr>
                <td class="alignright">
                    <input id="buttonNewRatios" class="buttPress2" type="button" value="Alternates"><br><br>
                        <textarea name="moreRatios" cols="42" rows="8"></textarea> 
                </td></tr></form></table>

Here's the Javascript part I'm having trouble with. I don't know how to incorporate the user values into the switch so the rest of the code can run those values. I ran the code through JSHint.com and it passed. However, there are no results being displayed.

    function gearSpurs(ratio) {
    var form = document.getElementById('formGearRatio');
    var spur1 = form.elements.spur1.value,
        spur2 = form.elements.spur2.value,
        spur3 = form.elements.spur3.value,
        spur4 = form.elements.spur4.value,
        spur5 = form.elements.spur5.value,
        spur6 = form.elements.spur6.value;

        var spurs = [];

        switch (ratio) {
            case 'sc10_4x4':
            spurs = ['58', '60', '62', '93'];
            break;
            case 'sc10':
            spurs = ['75', '78', '81', '84', '87'];
            break;
            case 'sc8':
            spurs = ['50', '52', '5开发者_JAVA技巧4'];
            break;
            case 'b44':
            spurs = ['72', '75', '78', '81', '84'];
            break;
            case 'b4t4':
            spurs = ['72', '75', '78', '81', '84', '87'];
            break;
            case 'gt2':
            spurs = ['54', '55', '56'];
            break;
            default:
            spurs = [spur1, spur2, spur3, spur4, spur5, spur6];
            break;
        }
        return spurs;
    }

How do I get spur1...6 to incorporate into the switch statement properly? (This code is being used in the iPhone and Android environments.) Works great apart from the additions.)

You can add them before the switch statement like so:

spurs = [spur1, spur2, spur3, spur4, spur5, spur6];

Then change the statements in your switch cases to use the push function which will add to the end of the array:

spurs.push(['58', '60', '62', '93']);

Alternatively, you can leave your switch alone and add the 6 values after the switch statement using push like so:

spurs.push([spur1, spur2, spur3, spur4, spur5, spur6]);

EDIT: Based on the answer you accepted, you now seem to want to return an Array that contains 2 Arrays. One with the pre-defined ratios, and one with the user defined spurs.

If that's correct, the function becomes even simpler:

var ratios = {
    sc10_4x4: ['58', '60', '62', '93'],
    sc10:     ['75', '78', '81', '84', '87'],
    sc8:      ['50', '52', '54'],
    b44:      ['72', '75', '78', '81', '84'],
    b4t4:     ['72', '75', '78', '81', '84', '87'],
    gt2:      ['54', '55', '56']
};

function gearSpurs(ratio) {

    var form = document.getElementById('formGearRatio'),
        spur1 = form.elements.spur1.value,
        spur2 = form.elements.spur2.value,
        spur3 = form.elements.spur3.value,
        spur4 = form.elements.spur4.value,
        spur5 = form.elements.spur5.value,
        spur6 = form.elements.spur6.value;

    return [ [spur1, spur2, spur3, spur4, spur5, spur6], ratios[ratio] ];

}

Your form tags are unbalanced. Just wrap the entire <table> with the <form>. (You can't start a form in one <td> and end it in a different one.)

<form id="form2">
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
        <tr>...</tr>

        <tr>...</tr>
        <tr>...</tr>
    </table>
</form>

I don't see any element with the ID formGearRatio.

And you can rework the code like this to simplify a little:

var ratios = {
    sc10_4x4: ['58', '60', '62', '93'],
    sc10: ['75', '78', '81', '84', '87'],
    sc8: ['50', '52', '54'],
    b44: ['72', '75', '78', '81', '84'],
    b4t4: ['72', '75', '78', '81', '84', '87'],
    gt2: ['54', '55', '56']
};

function gearSpurs(ratio) {

    if (ratios[ratio]) {
        return ratios[ratio];
    } else {
        var form = document.getElementById('formGearRatio'),
            spur1 = form.elements.spur1.value,
            spur2 = form.elements.spur2.value,
            spur3 = form.elements.spur3.value,
            spur4 = form.elements.spur4.value,
            spur5 = form.elements.spur5.value,
            spur6 = form.elements.spur6.value;
        return [spur1, spur2, spur3, spur4, spur5, spur6];
    }
}

The only thing I see wrong with your code is you're trying to find a form called formGearRatios but the form's actually called form2. If you change that line, the rest worked in my tests (if user doesn't select anything, it'll use the values from the alternate inputs).

edit as a note, I also had to edit in a way to call your function and retrieve the value of ratio, so assuming your full code already does that properly, the only problem is the form id.