The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Course Of The Month
10 days, 4 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Define differeing numerical value for input
Posted on 2013-12-02
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...
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:
Any help or quick suggestions on this would be greatly appreciated as I can't seem to jump this hurdle alone.
Thanks
<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>
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3
4 Comments
Active 4 days ago
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):
...or I guess you could use javascript (probably jquery) to show a warning for invalid entries.
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>
...or I guess you could use javascript (probably jquery) to show a warning for invalid entries.
Active today
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/ChrisS
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/ChrisS
Active 4 days ago
This looks promising :)
http://jqueryvalidation.org/min-method#value
http://jqueryvalidation.org/max-method#value
http://jqueryvalidation.org/min-method#value
http://jqueryvalidation.org/max-method#value
$( "#myform" ).validate({
rules: {
field: {
required: true,
min: 13,
max: 113
}
}
});
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position items using CSS's three positioning types
Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5.
Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display
(CODE)
HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month10 days, 4 hours left to enroll
624 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.