Solved

Define differeing numerical value for input

Posted on 2013-12-02
4
248 Views
Last Modified: 2013-12-03
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
Comment
Question by:MaxP0wers
  • 3
4 Comments
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39689809
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
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39689810
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
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39689826
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
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39689829
Actually I prefer Chris' answer, +1 to the slider :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Why can't my site show videos? 5 41
Summernote required 3 57
Centering a div in html5 5 47
HTML page and JavaScript 2 51
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now