Input for percentage values - javascript

I have some inputs on my webapp where we're asking the user to enter percentage values (e.g 10.75%, 23%). Currently, they have to enter these values as decimal (e.g. 0.1075 , 0.23).
This is causing confusion for some users, so I was hoping there was a way I could convert the values to and from these formats (the backend has decimal values, the HTML inputs display the percentage values). Is there a solution to this without having to roll-my-own with javascript or the like?
I didn't see anything in the HTML5 inputs that would do this, and I wasn't able to find a javascript lib that would do it easily.
What way have other people been doing percentage inputs in HTML?
Additional Info
The webapp is using Java/Spring, so the values coming to the HTML page are coming string from the java objects in question, so ideally I'm looking for something that doesn't take any backend coding.
Answer
It turns out that Spring 3.0 will do this automatically. Annotating the fields in question with:
#NumberFormat(style = NumberFormat.Style.PERCENT)
private BigDecimal rate;
Will do all the conversion to and from the input field.

The javascript required is very simple. For example you could store the fraction value of the user's input in a hidden field when the user submits.
​<form id="myForm">
<input type="text" id="myPercent" name="myPercent" />%
<input type="hidden" id="myFraction" name="myFraction" />
<input type="submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script type="text/javascript">
document.getElementById('myForm').onsubmit = function() {
document.getElementById('myFraction').value =
document.getElementById('myPercent').value / 100;
}
</script>

It's simple math... 75 to .75 is 75/100. Include a line which converts the numbers after they submitted them.

Related

Localization of input for numbers

I started to translate English web site to other languages. Thai, Bengali...
For example Bengali language.
To get a number from JavaScript I'm doing something like that:
<p id="demo"></p>
<input type="text" id="demoin" lang="bn"></input>
<script>
var a = 12345.44;
document.getElementById("demo").innerHTML = (a.toLocaleString('bn-US'));
document.getElementById("demoin").value = a.toLocaleString('bn-US');
</script>
And I'm getting this, as expected.
১২,৩৪৫.৪৪
But how can I deal with <input type="number"> elements.
Browser does not accept Bengali numbers in these inputs.
If I use type="text" I'm getting Bengali numbers on the Server and my PHP needed to convert it to put in into MySQL database.
How do other developers deal with translations?
Is there a JS library or Browser settings to help with it?

How to mask customized edit with regexp and maxlength of numbers only on Javascript?

I'm looking for an any js-lib or custom solution to customize input field. Requirements:
Input can conain only numbers, whitespace, round brackets and dots.
Maxlength should be calculated and limited by length = 10 NUMBERS ONLY. So for another symbols no limit
Tried to use imask, jquery mask plugin and others but can't find any solution.
You could solve simple client side validation with HTML5 like this
<form>
<input type="text" pattern="^[0-9().]{0,10}$" />
<input type="submit" />
</form>
But there a many ways to solve it with jQuery. One example is this validation plugin.
Another plugin could be this.

Implementing commas and decimals in autonumeric.js

I have a form which I am trying to get working with autonumeric.js. One of the errors I am getting is that number is not supported by autoNumeric. When I change the input type to text all inputs automatically auto fill to whatever number I am keying in. I am basically trying to start with adding commas and decimals, before i get into currency. I am a little confused as to where to go from here. This is my HTML
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<input value="" type="number" class='num1'/>
<input value="" type="number" class='num2'/>
<input value="" type="number" class='num3'/>
<input value="" type="number" class='num4'/>
</form>
This is my script
var autoNumericInstance = new AutoNumeric('.num1, .num2, .num3, .num4', AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
$('.num1, .num2, .num3, .num4').on('keyup', function() {
$('.num1, .num2, .num3, .num4').val(autoNumericInstance.getNumericString());
});
I have made some progress. I was able to get commas and decimals for my first input field, but only commas and NO decimals for my last input field, using this script
`
$('.num1, .num4').each(function() {
var autoNumericInstance = new AutoNumeric($(this)[0],AutoNumeric.getPredefinedOptions().numericPos.dotDecimalCharCommaSeparator);
});`
So now I need to figure out why the decimal is not working for my fourth input
What do you want to achieve exactly?
If you want to have 'basic' input with the usual comma as the digit group separator and the dot as the decimal point, then just use:
new AutoNumeric.multiple('#form1 input');
On the other hand, if you only want positive values, use:
new AutoNumeric.multiple('#form1 input', { minimumValue : 0 });
Lastly you were mentioning currency; I would suggest using on the the predefined currency format, and if you do not find yours then 1) ask for it to be included in the AutoNumeric library using the github issues, and 2) just configure it as you wish, for instance like:
new AutoNumeric.multiple('#form1 input', { currencySymbol : '€' });
Do note that you can fiddle with the options pretty easily using the official autoNumeric configurator.

Excel VBA - Manipulate Javascript

I have researched stackoverflow and other sources for many weeks for an answer to this question but have not been able to uncover an answer. I appreciate that there may be other posts that indirectly deal with the topic, but nothing seems to address the requirements of the specific example I have in mind, so I'm taking the plunge and posting. My request:
On the website www.4-traders.com there's an input box located at the top center of the page for entering a company name or stock ticker symbol. The page contains code that calls a javascript function as one types into the input box. The javascript searches a database for the best matches to the text being input, and the output of the javascript function is presented as a floating list box that one can select from. The code for this component of the page is as follows:
<td class="recherche_bl">
<input type="hidden" name="lien" value="recherche">
<input onblur="GlobalSearch.ACblur();" onkeyup="GlobalSearch.ACkeyUp(event)" onkeydown="return GlobalSearch.ACkeyDown(event);" autocomplete="off" type="text" name="mots" id="autocomplete" class="inputrecherche" value="Symbol or Keyword(s)" onclick="document.recherche_menu.mots.value='';GlobalSearch.LoadHisto()">
<input type="image" src="/images/loupe_recherche.png" class="htZo" align="absmiddle" onclick="document.getElementById('noredirect').value='1'">
<input type="hidden" name="RewriteLast" value="zbat">
<input type="hidden" id="noredirect" name="noredirect" value="0">
<input type="hidden" id="type_recherche" name="type_recherche" value="0">
</td>
GlobalSearch is the javascript function I'm interested in. I'd like to get Excel VBA to somehow select from the output of the GlobalSearch function after a value is input into the form. I currently have to use sendkeys to accomplish this, which as everyone knows has a number of drawbacks and requires that an Internet Explorer windows is open at the time. Here is the code I'm currently using for this piece:
The value of Ticker is set before this part of the code.
.document refers to an Internetexplorer.Application object I have created earlier on in the code.
PauseTime is a procedure used to delay the execution of code.
The two lines involving sending a 'space' and 'backspace' key are used to get the javascript to run (it doesn't seem to run without some manual user input). Once the javascript runs I want the procedure to select the first instance in the list box, so I send a 'down' key and then an 'enter' key.
.document.recherche_menu.mots.Focus
.document.forms("recherche_menu")("mots").Value = Ticker
PauseTime (2)
Application.SendKeys (" ")
Application.SendKeys ("{BS}")
PauseTime (2)
Application.SendKeys ("{DOWN}")
Application.SendKeys ("~")
I would really appreciate some help to figure this out. I think the real issue is that I don't have a deep enough understanding of javascript to code what I need to into Excel VBA. Thanks in advance for your help.
Constantine

Long form validation in JavaScript / jQuery

I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.
Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!
If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});
Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).
Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/
I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?

Categories