asked on

Define differeing numerical value for input

I'm trying to create a calculator which can determine someones snowboard length primarily by their body weight. I had a <select> tag initially but to improve user experience I'm attempting to have an <input> tag where they can just enter their body weight within the parameters of 13 to 113. I cant seem to find any way to get this input field where I can also provide each number given with a value via an <option> tag. Here is the code I'm using so far...

<td style="padding-right: 80px; margin-bottom: 15px;"><strong>Body Weight</strong></td>
<td>
<input id="weight" name="weight" type="number" style="margin-bottom: 15px; width: 40px; padding: 5px; text-align: right; padding-right: 5px;"><span class="help-inline" style="color: #999; margin-bottom: 15px; margin-left: -3px;">kgs</span>
<option value="90">13</option>
<option value="90">14</option>
....
<option value="172">112</option>
<option value="172">113</option>
</td>
</tr>

Open in new window

Any alternatives which would also achieve the same outcome would also be fine. To recap and solidify my objectives with this area of the calculator:

Input text box which provides a different value depending on the number entered.

A minimum of 13 and maximum 113 which can be entered.

Any help or quick suggestions on this would be greatly appreciated as I can't seem to jump this hurdle alone.

Thanks

Angelp1ay

Hi MaxP0wers

As far as I'm aware there is no HTML only option which allows text entry AND limits the options.

You could use the select tag instead (see http://www.w3schools.com/tags/att_select_form.asp):

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Open in new window

...or I guess you could use javascript (probably jquery) to show a warning for invalid entries.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Angelp1ay

This looks promising :)
http://jqueryvalidation.org/min-method#value
http://jqueryvalidation.org/max-method#value

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      min: 13,
      max: 113
    }
  }
});

Open in new window

Angelp1ay

Actually I prefer Chris' answer, +1 to the slider :)