Experts Exchange connects you with the people and services you need so you can get back to work.

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

MaxP0wers

Asked: 2013-12-02

Advertise Here

HTML

1 Solution

LVL 11

Angelp1ayCommented: 2013-12-02

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.

LVL 46

Chris StanyonCommented: 2013-12-02

An <option> tag has to be wrapped inside a <select> tag, which creates a dropdown.

Your <input> tag is set to a type of 'number' which is HTML5 and doesn't work in Firefox.

If you're looking at improving the user experience, why not take a look at the jQueryUI library - they offer a slider that may do precisely what you need.

Have a play with this to see it in action (just slide the slider)

http://jsfiddle.net/ChrisStanyon/JgxWx/

LVL 11

Angelp1ayCommented: 2013-12-02

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

LVL 11

Angelp1ayCommented: 2013-12-02

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Define differeing numerical value for input

Join & Write a Comment Already a member? Login.

Featured Post