This is probably very simple but I seem to be running around in ever decreasing circles...
I'm developing a webpage for our payroll area and...
Q. Is it possible to have two text input fields that update each other automatically and will work in both directions. i.e one will update the other and vica-versa depending on input
What I'm after here...
Employees current salary is entered into a text input
Payroll can then enter data into one of two text inputs (New Salary or Percentage Increase)
Entering a New salary will automatically update Percentage Increase or
Entering a Percentage Increase will automatically update the New Salary field
The whole idea is to allow payroll to use either percentage or actual salary to
come up with the new figure
Thanks
Frankie G
Here's a really basic implementation with no validation that the entered values are numeric:
window.onload = function() {
var currentSal = document.getElementById("current"),
percentInc = document.getElementById("percent"),
newSal = document.getElementById("new");
percentInc.onkeyup = function() {
newSal.value = currentSal.value * (1 + percentInc.value / 100);
};
newSal.onkeyup = function() {
percentInc.value = (newSal.value - currentSal.value) / currentSal.value * 100;
};
};
This assumes your html markup uses the element ids "current", "percent" and "new", but obviously you can change these. On any keyup within the percentage increase or new salary fields just do the appropriate calculation and update the other field. The whole thing is in an onload event for the page so that document.getElementById() can find the elements - you could, instead, put it in a script block at the end of the page (though having all contained in a function like that keeps the variables out of the global scope).
Demo: http://jsfiddle.net/5pDdM/
You'll have to implement either the onChange method or the onkeyup.
Both are usable, though onChange gets fired when a user leaves the field and the input is changed, and onkeyup, whenever you release a key you pressed (Meaning, if you hold the button it won't fire, only after releasing).
Inside that function you could do something like
function salEntered(sal)
{
document.getElementById("#perc").value = (document.getElementById("#origSal").value / sal )* 100;
}
function percEntered(perc){
var new_sal = document.getElementById("#origSal").value * ( 1+ perc/100);
document.getElementById("newSal").value = new_sal;
}
And bind those to either one of the named events.
I took the perc as a whole decimal notation.
Bind them using :
<input type="text" id="newSal" onChange="salEntered(document.getElementById('newSal').value)" />
Or onkeyup.
Not able to test, will do later on, when I wake up.
When wrong, correct me. Using the var keyword keeps the variable in the correct scope , being the function.
Related
I need to detect a change in a Gravity Form field (form 5, field 215; is a number field), round the number so I can get a trailing zero if it doesn't already have one, and then return the new, rounded value back to the field. I tried to piecemeal something together using bits of other code I found, but I must be doing something wrong. I'm an absolute rookie with JavaScript.
I'm using Gravity Wiz's "Gravity Forms Custom JavaScript" plugin to insert this script only on the page with the appropriate form.
jQuery(“#gform_fields_215”).on(“change”,”#input_215″, ( function(e) {
var number = document.getElementById("input_215");
var rounded = number.toFixed(2);
document.getElementById("input_215").value = rounded;
}
What am I doing wrong? Probably everything! LOL
I know you have already forgotten you ever asked this. but here's the solution.
jQuery('#gform_fields_215').on('change','#input_215', ( function(e) {
var number = document.getElementById("input_3_1_5").value;
var rounded = parseInt(number).toFixed(2);
document.getElementById("input_215").value = rounded;
}
You have used jQuery and vanilla js syntax. if you would use only jQuery it would be done as below.
jQuery("#gform_3").on("change", "#input_3_1_5", function (e) {
$(this).val(parseInt(this.value).toFixed(2));
});
element value is a string it need to be parsed into a number before adding decimal places
this.value can be used to get value of current element
Is there any smart, minimalistic way to always show the prefix (positive, negative) of a number in a HMTL input field? (e.g. +1, 0, -1)
I have only found s solution for PHP:
How to prefix a positive number with plus sign in PHP
I have to use <input type="text"> since there are different implementations for text=number in different browsers: Localization of input type number
Why am I doing this?
I have an input field that shows the percentage that can be added (or subtracted) to a certain value.
Basevalue: 10
Mofification %: +10
Results: 11
The easiest way would be using some basic javascript. Add a script at the end of your HTML page (before the body closing tag) then give to the input an id, for example prefixedInput. Then you can write your little script
var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;
if (inputFieldValue > 0) {
inputField.value = "+" + inputFieldValue;
}
if (inputFieldValue < 0) {
inputField.value = "-" + inputFieldValue;
}
Now, that works in a way that isn't really useful because this function will be executed just one time when the page will load, so if you have assigned to your input a value, this will be prefixed with its sign. However if you want to bind this behaviour to some actions (e.g. prefixing the value even if the user inserts the value after the intial page load) you will be forced in using event listeners.
I have an input box in a component. I want to prevent the user from being able to add any input if the value of the input box contains more than 2 decimal places.
E.g. if a user inputs 10.95 I dont want to allow them write anything else after this value. They could still update it to 101.95 but it should prevent any input being added after the final decimal place.
The code I have so far is below.
class inputBox extends Component {
countDecimals(value) {
if(Math.floor(value) === value) return 0;
return value.toString().split(".")[1].length || 0;
}
updateValue(e) {
if(this.countDecimals(e.target.value) > 2) {
//prevent user from inputting into box after the decimal place...
}
}
render() {
return(
<input type='text' onChange={this.updateValue} />
)
}
}
You could use React controlled component and bind a state to the input's value atrribute. Then your onChange event handler will look like.
updateValue(e) {
this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")})
}
Worked for me.
document.getElementById("yourinput").oninput=function(){
this.value=this.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".");
};
Replace the value with a new value, that is shortened to two chars after each dot.
http://jsbin.com/soretokuse/1/edit
I think you need to save the oldvalue, that should work.
var input=document.getElementById('input'),
countDecimals=function(value) {
if(Math.floor(value) === value) return 0;
if(value.toString().split(".")[1])
return value.toString().split(".")[1].length || 0;
},
updateValue=function(val) {
if(countDecimals(val) > 2) {
input.value=input.getAttribute('oldValue');
}
};
input.oninput=function(){
updateValue(this.value);
input.setAttribute('oldValue',this.value);
}
<input id="input" type="text"/>
As far as my knowledge in Javascript and HTML goes there is no 'easy solution' for this. Working with both 'raw' JS and ExtJs forms has learned me that there are multiple ways to focus and manipulate a field. Which makes it hard to manipulate the inner value at the right time.
So allow me to split your issue in to multiple problems. Which I will attempt to tackle:
Triggering
You want your logic to run at all the times something happens to the field.
The following link provides you with the options:
http://www.w3schools.com/TAGS/ref_eventattributes.asp
When you use onchange it will trigger when someone changes the values after you blur the field (you click or tab away from the field). So that's no good.
You could try the key (up, down, press) events. But that excludes when you paste a value.
Long story short, you could in theory try to implement a function on every event you could think of to make sure you catch the users input and do what you want with it.
My solution is, start a timer when you focus a field and validate the value and do further logic. And finalize everything you wanted to do on blur.
Determining the correctness of the value
You could write some nifty regex or a single line statement that tells you if the value is correct. It's all the same in the end, it should fit your needs.
So something like:
var inputVar = element.value;
var inputFloat = parseFloat(inputVar);
var normalizeInput = Math.round(inputFloat * 100) / 100;
if(inputFloat > 0 && normalizeInput == inputFloat){
#correct value
}else{
#incorrect value
}
Handling correct/incorrect input
Now you want to handle the user input and do something.
Things like setting the field to disabled or read only would prevent further input and changes, but would not let your users do anything to your field.
As what I read is you want the field to not change in function, you want to be able to edit it.
So that leaves you with 2 options:
Editing the field content directly by overriding the element.value with the desired value.
Manipulating key inputs / selection to try and keep the cursor at same position the user left it while correcting the false input.
I would opt for the former as it is a lot less of a hassle, although it might mess with the cursor position (browser dependant).
Final implementation
So what I propose combining all the above:
On focus you start running a setTimeout or setInterval
http://www.w3schools.com/jsref/met_win_settimeout.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
In the function run then, you check if there is a previous value set.
The first time it is NOT so:
You have to hold this previous value somewhere, you could hold it in a variable within javascript or put it in to the field in the DOM.
http://www.w3schools.com/jsref/met_element_setattribute.asp
var inputElement.setAttribute('old_value', oldValue);
Now you check if this value is correct before saving it, else just default it back to blank (or attempt to normalise the value to something that validates, you could keep cutting away characters at the right for example).
Now on each run you check if the value is correct. If the value is correct, you hold the new value as the 'new' previous value (and calling setTimeout again if you use that method).
If it is not correct you write back the old value or attempt to normalise the input value and if that fails use the last correct value.
On the blur event you clear the setTimeout or setInterval running in the background:
http://www.w3schools.com/jsref/met_win_cleartimeout.asp
http://www.w3schools.com/jsref/met_win_clearinterval.asp
(Alternatively you could check if the document.activeElement is the same as the one that is run on this 'loop' so it knows when to stop).
On blur you check the value one last time and do the same logic to prevent false input.
PLAN B
Use the HTML5 number input field:
HTML 5 input type="number" element for floating point numbers on Chrome
Try <input type="number" step="0.01" /> if you are targeting 2 decimal
places :-).
edited Apr 27 '15 at 18:10
Andre Figueiredo
Which only works on browsers that support it.
I have a few inputs on my page that need to have a max length of sorts and this is working to an extent except that an extra number keeps being added because of a plugin we're using...and no I can't get rid of the plugin causing it.
To fix this I need to remove one character from the input field. I have gotten to the point where it will remove it from the value of the input, but it is still showing on the screen...which is the issue.
Is there a way to disallow typing after they hit a certain point using JavaScript? I cannot use max length in the case because the virtual keyboard we are using ignores that completely.
I have something like this
var target = event.currentTarget;
var name = $(target).attr("name");
var validationLength = $(target).attr("validation").length;
$('input[name="'+name+'"]').on('keyup keydown change', function () {
if($(this).val().length > validationLength){
$(this).val().substr(0,$(this).val().length-1);
};
});
And like I said this will remove it from the value of the input, but not what the user actually sees on the screen (the most important part). Any help would much appreciated!
validationLength = 10;
$('#test').on('keyup keydown change', function () {
if($(this).val().length > validationLength){
val=$(this).val().substr(0,$(this).val().length-1);
$(this).val(val);
};
});
http://jsfiddle.net/mctkpLph/
jSignature is having canvas and it has a class. How can I validate jSignature whether I have drawn something or not ?
I have added one bind for click event.
$sigdiv.bind('click', function(e) {
$("#num_strok").val(parseInt($("#num_strok").val()) + 1);
});
Problem is even I click some corner also num_strock get increases. And for some dragging it will not increase.
I have tried in Google whether it has any built in isEmpty function is there or not. But I have not found anything.
if( $sigdiv.jSignature('getData', 'native').length == 0) {
alert('Please Enter Signature..');
}
Very late to the party... So I wanted to give some input on my findings, each related to
using $("#sigDiv").jSignature('getData', 'putSomethignInHere') function to validate the a signature is present.
Here are the options I have examined for the second attribute passed into the jSignature function:
native returns an object of objects .length == 0 when the sig box is empty, but .length > 0 when there is something in the sig box. If you want to know how many strokes just use the length of this object.
NOTE: According to the jSignature documentation:
"Stroke = mousedown + mousemoved * n (+ mouseup but we don't record that as that was the "end / lack of movement" indicator)"
base30 also returns an object. Here I looked at the information in the second index position of this object.
x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE Here x would yeild TRUE if the box has been signed and FALSE when the jSig box is left untouched.
In my case, I used the base30 attribute for validating signature complexity, not just "did the end user draw something?".
x = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE. To validate the end user actually signed in the box and gave more than a simple '.' of small 'x'. The return value of the second index yielded from base30 gets larger as the complexity. Thus, if the user did enter just a dot,
x = $("#sigDiv").jSignature('getData', 'base30')[1].length would be about 5. The yielded value just get larger and larger the more the end user draws in the box. The highest lenght I recorded during my testing was 2272. And I scribbled and scribbled in the box for all of 15 secounds.
According to the jSig documentation:
base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors.
image- this is a choice I would avoid for validation. It produces an object with a long string in the second index position. The last one I measured was 672 characters long. Using image produces a string regardless whether the sig box is blank or used. And to make things more unuseful, the string produced is different for a blank signature box in Chrome verse a blank signature box in FF Developer. I'm sure the image value has a use, but just not validation.
svgbase64 - this is similar to image with exceptions. Unlike image, using svgbase64 produces a long -yet shorter- string in the second position. Also, this string IS the same when I performed the Chrome verse FF Developer check. This is where I stopped my testing. So I assume you can use svgbase64 for validation.
These are my conclusions, yours may vary. Please don't hold my low reputation against me.
According to the jSignature website there is a getData function in the API. If you use the getData function on an empty signature area as reference, you could then use getData whenever you want and compare it to the empty reference. You would then be able to tell if something has been written in the signature area.
This is just a guess from my part, as I haven't used this script, but I think something like this would be able to work.
EDIT
I also found this on the website
The dom element upon which jSignature was initialized emits 'change'
event immediately after a stroke is done being added to the storage.
(In other words, when user is done drawing each stroke. If user draws
3 strokes, this event is emitted 3 times, after each stroke is done.)
Here is how you would bind to that event:
$("#signature").bind('change', function(e){ /* 'e.target' will refer
to div with "#signature" */ })
Event is emitted asynchronously through a "thread" ( setTimeout(..., 3) ) so you don't need to wrap your event handler into "thread" of any kind, as jSignature widget will go on and will not be waiting for you to be done with your custom event handler logic.
Couldn't you just set a flag variable that gets set to true on the first change event? That would indicate that something is written into the area
You can check the base30 vector if any points are there.
var isSignatureProvided=$sigdiv.jSignature('getData','base30')[1].length>1?true:false;
This worked for me, part using roch code :
it basically assigns the signature to a hidden textarea before submitting for validation:
<div id="signatureparent">
<div id="signature"></div>
<label for='signature_capture' class='error'></label>
</div>
<span style="visibility:hidden;">
<textarea name="signature_capture" class="required" id="signature_capture"></textarea>
</span>
<script>
$(document).ready(function(){
$('#submit').click(function() {
var isSignatureProvided=$('#signature').jSignature('getData','base30')[1].length>1?true:false;
if (isSignatureProvided) {
var $sigdiv = $("#signature");
var datapair = $sigdiv.jSignature("getData", "svgbase64");
var data = $('#signature').jSignature('getData');
$("#signature_capture").val(data);
}
});
});
</script>
Unfortunately no of existing answers worked for me. On my site I have two methods of inputting a signature: manual and jSignature('importData', imgBase64)
Testing of jSignature('getData', 'native') worked only for manual drawing. And nothing worked for the image way.
The solution appeared to be simple. Just test the canvas element. It probably won't work for IE9 but who cares. Here is it in TypeScript:
isSignatureBlank() {
var canvas = <any>$('#signatureElem').find("canvas")[0];
if (!canvas) return true;
this.emptyCanvas = this.emptyCanvas || document.createElement('canvas');
this.emptyCanvas.width = canvas.width;
this.emptyCanvas.height = canvas.height;
return canvas.toDataURL() == this.emptyCanvas.toDataURL();
}
Adopted from here: How to check if a canvas is blank?
Search the code in your javascript file. Check when they are hiding 'Undo Stroke' block
t.dataEngine.data.length
That will help you finding how many stroke is made to the signature panel.
Maybe try something like this (assuming your signature fields are of class 'signature')...
$('.signature').each(function (index) {
var datapair = $(this).jSignature("getData", "svgbase64");
if (datapair[1].length > 1000 ) {
// Signature is valid; do something with it here.
}
});
The best answer:
if($sigdiv.jSignature('getData', 'native').length == 0) {
alert('Please Enter Signature..');
}
produced the following error:
$sigdiv.jSignature(...) is undefined
So I would suggest using:
if(typeof($sigdiv.jSignature('getData', 'native')) != 'undefined') {
alert('Please Enter Signature..');
}