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

Question

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', '54'];
            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.)

Mathematical formulas will be applied to the spur numbers, and that output will be given. — Steve
– Steve, Commented Jun 13, 2011 at 16:19

Craig M · Accepted Answer · 2011-06-13 16:00:05Z

1

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]);

answered Jun 13, 2011 at 16:00

Craig M

5,6084 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Over a year ago

I used the latter suggestion, plugging it into different places within the function, including as the default, but was unable to get it to work. It needs to "return spurs" at the end for the next function to work.

Steve Over a year ago

I used your former solution and it worked like a charm! Thanks!

user113716 · Accepted Answer · 2011-06-13 18:20:29Z

1

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];
    }
}

edited Jun 13, 2011 at 18:20

answered Jun 13, 2011 at 16:31

user113716

323k64 gold badges454 silver badges441 bronze badges

3 Comments

Eric Over a year ago

Beat me to using an associative array :P

Steve Over a year ago

I corrected the form placement around the tables. However, your alternate code did not fit with the following function, which needs the "spurs" array returned.

user113716 Over a year ago

@Steve: It does return the Array. I just didn't name it spurs. The name is irrelevant once you've returned the Array. The solution you chose returns 2 Arrays inside an Array. Was that what you wanted? If so, it's even easier. Just do return [ [spur1, spur2, spur3, spur4, spur5, spur6], ratios[ratio] ]; I'll update.

two13 · Accepted Answer · 2011-06-13 16:11:37Z

0

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.

answered Jun 13, 2011 at 16:11

two13

3451 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related