CODEWITHSUNDEEP
javascriptjqueryhtml
Tom Canfarotta
Tom Canfarotta

Reputation: 773

Input Range Limited to one per form

I have a form where I need three input ranges for user selection.

When i implement one range it works perfecly fine (see below) but when i add a 2nd or a 3rd range the output variable always remains at 0.

How would I add two more ranges to this form?

My form looks like:

<form action='search.php' method='post' oninput='amount.value=rangeInput.value'>

<input type='range' id='rangeInput' name='satscore' min='0' max='2400'>

<output name='amount' for='rangeInput'>0</output>

<input type='submit' value='FILTER'>

</form>

Upvotes: 0

Views: 101

Answers (1)

om1
om1

Reputation: 166

Without seeing your full code, i guess the problem comes from how you name the ranges and input fields. This should work:

<form action='search.php' method='post' oninput='amount1.value=rangeInput1.value; amount2.value=rangeInput2.value; amount3.value=rangeInput3.value;'>

<input type='range' id='rangeInput1' name='satscore1' min='0' max='2400' value="0">
<output name='amount1' for='rangeInput'>0</output>

<input type='range' id='rangeInput2' name='satscore2' min='0' max='2400' value="0">
<output name='amount2' for='rangeInput'>0</output>

<input type='range' id='rangeInput3' name='satscore3' min='0' max='2400' value="0">
<output name='amount3' for='rangeInput'>0</output>

<input type='submit' value='FILTER'>

</form>

Upvotes: 1

Related Questions