Is it possible to have a textbox where the user will input a number and in another textbox, which will automatically add 5 to the value of the first textbox and subtract 5 to the value in the third textbox?
For example:
User input: 10
2nd textbox: 15
3rd textbox: 5
Please help
You can do it like this:
<input type="text" id="input1" onkeyup="setValues(this.value);">
<input type="text" id="input2">
<input type="text" id="input3">
<script type="text/javascript">
function setValues(value){
document.getElementById('input2').value = (parseInt(value)+5);
document.getElementById('input3').value = (parseInt(value)-5);
}
</script>
you can find solution Link.
HTML Part
<input type="number" id="input1">
<input type="number" id="input2">
<input type="number" id="input3">
JS Part
$('#input1').bind('click keyup', function(event) {
$('#input2').val(parseInt(this.value)+5);
$('#input3').val(parseInt(this.value)-5);
})
Related
I have a form field with the last name and want to generate a customer ID starting with the first two characters from their last name in caps and add a random number to it. So I need the other field which dynamically updates with only the first two characters in uppercase. This is what I have so far:
HTML:
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value">
<input type="text" id="textfield2" value="">
</form>
JAVASCRIPT:
document.getElementById('textfield2').setAttribute('maxlength',2)
You can get the two first characters from your input and put them in the second with javascript :
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="document.getElementById('textfield2').value=this.value.substr(0,2).toUppercase()">
<input type="text" id="textfield2" value="">
</form>
I am not sure but I think that the javascript code don't care about the attribut "maxlength". Futhermore, you need use toUpperCase in order to have your result.
<form action="#" id="form_field">
<input type="text" id="textfield1" value="" onKeyUp="txt(this.value)">
<input type="text" id="textfield2" value="">
</form>
<script>
function txt(value) {
document.getElementById('textfield2').value = value.substr(0,2).toUpperCase();
}
</script>
hope it works
this is my code to reflect the text of a textbox1 into another textbox that called textbox1a on keyup. and it is work good when they are only one.
my question is how can i reflect each textbox value if the class is the same with another?
here is my codes :
$(".textBox1").keyup(function(){
$(".textBox1").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
TextBox 1 : <input type="text" class="textBox1" class="valueEnter"></input>
TextBox 1a : <input type="text" class="textBox1"></input>
<br/>
TextBox 2 : <input type="text" class="textBox2" class="valueEnter"></input>
TextBox 2a : <input type="text" class="textBox2"></input>
</div>
You can get the class name of the input type of text and then add your logic:
$("input[type=text]").keyup(function(){
var className = $(this).attr('class').replace('valueEnter','').trim();
$("."+className).val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
TextBox 1 : <input type="text" class="textBox1 valueEnter"/>
TextBox 1a : <input type="text" class="textBox1"/>
<br/>
TextBox 2 : <input type="text" class="textBox2 valueEnter"/>
TextBox 2a : <input type="text" class="textBox2"/>
</div>
Notice that it is type=text and not type=textbox. Since, you have two classes with valueEnter, i would like to modify a bit where we skip the class name valueEnter when we select a class for textbox in the JQuery code.
Here you go with a solution
$('input[type="text"]').keyup(function(){
$('.' + $(this).attr('class')).val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
TextBox 1 : <input type="text" class="textBox1" class="valueEnter" />
TextBox 1a : <input type="text" class="textBox1" />
<br/>
TextBox 2 : <input type="text" class="textBox2" class="valueEnter" />
TextBox 2a : <input type="text" class="textBox2" />
</div>
It's <input type="text"> not <input type="textbox">.
Look for the same class on keyup.
Hope this will help you.
I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?
Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/
$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box
Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />
In page 1 I have this html
<input value="creditCard" name="creditCard" maxlength="16">
<input value="name" name="name" maxlength="4">
<input type="button" name="submit">
DISPLAY:
1234567891234568
Name
button
If I click the button, I will go to page 2 and in page 2 I have an edit button. If I click edit, I will be directed to page 1 again with the credit card in masked form
DISPLAY:
XXXX-XXXX-XXXX-4568
Name
button
If for example, I click the creditCard input and then the name input, the display will look like:
DISPLAY:
XXXX-XXXX-XXXX-4
Name
button
Since I added "-" it counts as a character and the maxlength is 16 so the value of the input is trimmed to 16 characters only.
Is there a way I can make to not consider "-" as a character to be counted? I can't adjust the maxlength attribute of the input. It's a business rule. Thank you very much!
Why don't you use JQuery Mask Plugin for this purpose:
https://igorescobar.github.io/jQuery-Mask-Plugin/
It gives you lot of patterns to handle.
I hope you can solve it within this code.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
<input type="text" size="4" tabindex="1" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="2" maxlength="4" onkeyup="myFunction(this,this.value)"> -
<input type="text" size="4" tabindex="3" maxlength="4" onkeyup="myFunction(this,this.value)">
</form>
<script>
function myFunction(x, y) {
if (y.length == x.maxLength) {
var next = x.tabIndex;
if (next < document.getElementById("myForm").length) {
document.getElementById("myForm").elements[next].focus();
}
}
}
</script>
</body>
</html>
This is my demo cord.
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" onclick="doMath();" />
<script type="text/javascript">
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
// Add them together and display
var sum = parseFloat(my_input1) + parseFloat(my_input2);
document.getElementById('total').value=sum;
}
I want to work this function when my_input2 is enter it's value. Just like onclick method for button is there any event to set value to total tetxfeild after key release event?
<script type="text/javascript">
$(document).ready(function () {
$("#my_input2").blur(function () {
var sum = parseInt($("#my_input1").val()) + parseInt($("#my_input2").val());
$("#total").val(sum);
});
});
</script>
<div>
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" />
</div>
And also u should frame ur question correctly bcz u have added code in button click and asking us it should work after leaving textbox
Put onkeyup() on second input field this will fire your function.
Something like that:
<input type="text" id="my_input2" onkeyup="doMath();" />
try this
<input type="text" id="my_input2" onchange="doMath();" />