How to make an input field only take feasible dollar amounts - javascript

Hey I'm trying to create an input field in javascript with a Rails back-end.
I would like to make the input field take only currency amounts. so
$1.00
$100.24
How could i pull this off. Currently a person can put in multiple decimal points and so on.
Hopefully this question is not too vague.

Bind this function to the onchange event of your text field. This will parse the value of the field as a float and remove any number after 2 decimals.
You can also use input type="number" to prevent strings as input.
Needless to say, this will require server-side validation. The user can disable Javascript and input type fairly easily: never expect this to work if these data will get back to your server.
function check(e){
e.value = parseFloat(e.value).toFixed(2)
}
working jsfiddle: here.
input: 123456 - result: 123.456
input: 12,3456 - result: 12,34

Related

Filling multiple input fields with a javascript string

Is it possible create a javascript string that, when manually copied and pasted to another web page, will paste information across multiple input fields at the same time?
For instance, suppose a webpage has two input fields. I cannot edit the webpage html, but I can type into the input fields. I can also paste information in, using Ctrl-V or the like.
I have another webpage, which I can edit. The javascript for my webpage creates a string such as "Input for in1 here \t Input for in2 here". That string is presented through window.prompt(myString). I copy myString from the prompt (Ctrl-C), switch to the other webpage with input fields, and paste the string (Ctrl-V). How can I format my string so it pastes across both input fields?
Is it possible to format the string (myString in the example here), so that it will do this?
Obviously "\t" won't work for this. Same for "\n", etc.
Basically, I'm trying to create a helper for data entry. One web page would have the helper javascript. The other page (not in the same domain) would have multiple data input fields.
The data input page does not have an API hook.
Are you saying you would have a prefilled value in the prompt of:
"Input for in1 here Input for in2 here"
So for example if were looking for First and Last name
"Chris Johnson"
You could use substr() and indexOf() to find the space:
var firstInput = str.substr(0,str.indexOf(' '));
var secondInput = str.substr(str.indexOf(' ')+1);
Heres a fiddle
http://jsfiddle.net/1v2tn8p4/
After doing more research, it appears this is possible in some limited circumstances by using a bookmarklet.
For my question above, once the id of the input fields is found, I can use bookmarklet code to auto-fill in the values of those input fields.

Linking mvc razor checkbox to razor textbox

tl;dr I want to save the value of a textbox to the model ONLY IF the checkbox is checked.
First off, I know my code is very messy. I've been trying to improvise my code off of another stack overflow question so it is first and foremost wrong. What I am trying to do is I have these restrictions to an event, some are bool and some are numbers. For example, no smoking is a bool, but minimum age is a number. These are optional though, the user doesn't have to set any. So I want to have a checkbox saying that they want the restriction but to also save the value to the model. Here is what I have so far:
<p>
<input type="checkbox" id="ageLowCapCB"
#(((Model.currentRestrictions.AgeLowCap != null) &&
(Model.currentRestrictions.AgeLowCap != 0)) ? "checked = 'checked'" : "")
/>
Low Age Limit
#Html.TextBoxFor(e => e.currentRestrictions.AgeLowCap, new {id = "ageLowCap"})
</p>
and the script/jquery for this I have is:
$("#ageLowCapCB").click(function () {
var isChecked = $(this).is(":checked");
$("#ageLowCap").val(isChecked ? /*I don't know what to put here*/);
});
The question I pulled this from was using values of "T" or "F" for true and false so it was easy for them to fill in the comment section putting "T" : "F" and that was it. But I need to pull the value of the text box and set it to the value of Model.currentRestrictions.AgeLowCap. Does anyone have any good ideas on what to do in a weird situation like this?
Unfortunately, there is on way of passing your javascript values to c# view model. However there is some workarounds. You can create action which will accept whatever you want to pass from javascript to c# and then when you need to pass that value(s), that can be done by making ajax request to that action and in that action you can persist that value(s). From there you have many options like in database, session and etc.
Question is not very clear to my understanding. What I understand is if Checkbox is checked display textbox which accepts integer value. All these are model fields.
Approach 1: Write a JavaScript function to detect if Checkbox checked attr is true, Display textbox to accept input from user; Write function for textbox to accept only integers. Onkeypress you can call that function.
Approach 2: If you do not have to take integer value from user in textbox, then on post validate if checkbox is checked and assign value to integer textbox if it is true.
-Thanks

jQuery function to control what user types in a textfield

My initial idea was something like that:
$(document).on("element","event", function(e){
});
But I have some doubts about this function:
which value I should use for "element"? I could use something like this: 'input[type=text]' or I should use a class for the element (like class="validate") and use ".validate" for instance)
which value I should use for "event"? I could use onfocus from element input, or do jQuery have a particular nomenclature for this type of event?
for each key presses (which seems I should use var key = which to capture), how I could check if it's a number or a letter?
using the regex string, how I could get the type of the character in a specific position? for instance, with the regex: [0-9]{2}/[A-Z]{2}/[0-9]{4}, the position 2 should return 'number' as type, the position 3 should return letter, and the position 2 should return 'symbol'.
Anyone can give me some help here?
UPDATE
Let me try be more clear about my question:
I initially think about create this jquery function in my project:
$(document).on("element","event", function(e){
//
});
But I have no idea how "event" I should listener here (I could use the same events available for the input atribute from html?) and like to know what name use for element (I ever use the ID or class from element, and jquery examples always use on of them, but how I could use the own element name, like input - I see once this being used: input[name=something], can I use this too: input[type=text]?).
In relation to the content of the function, I imagine this pseudo-code:
1- tam = size of string (calculated based on regex - already have a function to d this).
2- model[] = array of characteres with 'tam' elements (ok to me, too).
3- initialize counter=0.
4- for each key pressed by user:
4.1- type = store the type of the character in the position 'counter' of 'model[]' - I think I can use the regex to do this, but I don't know how.
4.2- if the character has same type from 'type' variable, store it in model[counter] and increment counter.
So, basicly, my question is find a way of, given a regex, find what type of character should be in each position (I explain that with example in the item 4 above).
There are many ways in which you can restrict/validate what your users type in the input fields.
Method 1
You can use input masking, a great way to improve data validation in forms. Masking allows you to only accept data in a certain format, type. Have a look at this - https://github.com/RobinHerbots/jquery.inputmask
Masking Demo - http://robinherbots.github.io/jquery.inputmask/
This also accepts regex as you need, can be implemented using the library something like this -
<input id="example2" data-inputmask-regex="[a-za-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
REGEX WORKING DEMO - http://codepen.io/nitishdhar/pen/Clzem
Note - This method actually restricts the user from typing or entering anything that does not comply to your given pattern in the mask.
Method 2
You can use different input types to control the input eg. text, email, password, number etc.
Ref - https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
Note - This method just defines the type of input control that will be rendered, whether password type or a number type. Helps browsers accept data in those formats.

Way to grab what you see in Dojo Number TextBox

I'm wondering why for some widgets such as the currency widget when I perform a dojo.byId to get a value of the textbox, I get back the formatted value meaning I get back something like this: "$44.3" with the dollar sign.
However when I created a custom percent textbox, and it inherits from the NumberTextbox (as so does the currency textbox widget), for some reason doing a dojo.byId returns me the value without the % even though I see there is a % in the textbox.
I'm trying to unit test this stuff and for some reason, for the currency control I was able to do something like this:
var formatedValue = dojo.byId("currencyTextBox").value;
doh.t(formatedValue === "$46.93", "incorrect formatting");
which when I check formattedValue it gave me "$46.93".
However when I tried this same type of deal with my percent textbox, if I see for example "55%" in the textbox, this will return 55, not "55%":
var formatedValue = dojo.byId("percentTextBox").value;
doh.t(formatedValue === "93%", "incorrect formatting");
so I don't understand why the behavior would act differently in terms of it picking up the textbox value using dojo.byId. (Obviously if I were to do a widgetInstance.get("value"); I'd expect only a whole number to come back, the raw number without the formatting.)

Format input data using YUI 3

Is there a way to apply a mask in a input using yui3 ?
Is it possible to have a field where the user can only enter a phone number?
And if so, how?
Thx a lot
I would say that your best bet is to have an onChange or onKeyup (or even onValuechange - a YUI construct) handler listening on that input. Whenever it detected a change, you would run a formatting function on the current value of the input, which formatted it in the way you wanted.
if you want to be light-handed about it, just put the dashes in where they go, for example :
"1105551212" --> "110-555-1212"
if you want to be heavy-handed about it, the event handler could literally strip out any non-numeric, or non-dash characters, which effectively prevents the user from entering bad input, though they could of course put in a non-existent phone number.
one step further: do both. strip out invalid characters, and do auto-formatting.

Categories