Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

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
0
MaxP0wers
Asked:
MaxP0wers
  • 3
1 Solution
 
Angelp1ayCommented:
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.
0
 
Chris StanyonCommented:
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/
0
 
Angelp1ayCommented:
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

0
 
Angelp1ayCommented:
Actually I prefer Chris' answer, +1 to the slider :)
0
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.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now