I want to increase the value entered in the amount input by 10% in real time and show it in the amount + commission input, how can I do it? I will be glad if you help me thank you
Using jQuery, read the input value on change and then calculate the final amount after commission and display it in the second input field which will be disabled.
$('input').on( "input", function() {
console.log( $( this ).val() );
let val = parseInt($(this).val());
let comm = 10;
let total = val + val*comm/100;
$('input[name="total"]').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="amount"/>
<input type="text" name="total" disabled />
You need to provide the code you have so we can help you.
However, you can make this with Jquery using .change() method
let amount = 0;
let amountPlusCommission = 0;
const commission = 0.1;
$("#yourinputID").change(function () {
const value = $(this).val();
amount = value;
amountPlusCommission = value + (value * commission);
$("#yourSecondinputID").val(amountPlusCommission);
});
Change the yourinputID with the first input ID and yourSecondinputID with the result input ID.
EXTRA: .keyup() function is much better for this
$("#yourinputID").keyup(function () {...})
.change() detects when the input changes, but .keyup() detects when the user releases a key on the input and is much more efficient.
Related
I have an input with type number. I have a min value of 0 and a max value produced by a variable (eg 5). Using the up/down arrow I can go between 0 and 5 only. how can I prevent anyone from typing in 6 or above?
I have set up as follows
<input type='number' id='quantity' name='quantity' min='0' max='$the_quantity_required'>
I have tried with readonly and disabled with the obvious result of preventing interaction with the text box. I don't know javascript but was wondering if there was anything in js that would do this?
Any help would be appreciated
Try this
<script>
document.addEventListener("DOMContentLoaded", () => {
var el = document.querySelector('#quantity');
el.addEventListener('input', function(){
let val = this.value;
let max = parseFloat(this.getAttribute('max'));
val = parseFloat(val);
if(isNaN(val)) this.value = '';
if(val > max) this.value = max;
});
});
</script>
Using jquery to get the value of a textbox.
BUT
i need to enter the id of the textbox, then use that value to get the value of the textbox using jquery.
var tt = $("#fieldname").val()
that works
now how do i enter the fieldname at runtime, and get jquery to execute the val command as if it was hard coded?
There are a few ways that you could do this. One way is to listen to one of the keyboard or change events on the textbox you enter the id into, to help determine when the input has changed. So for example
$("#inputText").on("keyup", function(keyupEvent){
var textboxId = $("#inputText").val();
var textboxIdValue = $("#" + textboxId).val();
});
Or another way could be to use a click event with similar kind of logic, so for example
$("#clickMe").on("click", function(){
var textboxId = $("#inputText").val();
var textboxIdValue = $("#" + textboxId).val();
})
An example for the use case of both can be seen here https://fiddle.jshell.net/xpvt214o/114584/
Here is an example for you to get started with:
<body>
<p>Type "one" or "two" below</p>
<input id="search" />
<input id="one" value="This input is #one" />
<input id="two" value="And this is #two" />
<p id="result">No input specified</p>
</body>
And the corresponding jQuery code:
// Cache jQuery elements for performance and readability
var $search = $("#search");
var $result = $("#result");
$search.on("change", function() {
var search_value = $search.val();
if (search_value.length) {
search_value = "#" + search_value.toLowerCase().trim(); // Sanitise user input
if ($(search_value).length) {
$result.text($(search_value).val());
} else {
$result.text("Input not found");
}
} else {
$result.text("No input specified");
}
});
This will show the value of the specified input, if it exists.
You can see it in action here: https://jsfiddle.net/jeevantakhar/xpvt214o/114558/
i'm working on computing the product of two textboxes. However, the user needs to press "enter" before the txtTotal will show the total value. Pls I really need help. I'm not really familiar with jquery, and I'm still studying jscript. Thank you so much !
Here is my updated code:
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$('#txtQuantity').bind('input',function(){
var quantity = parseFloat($(this).val()) || 0;
var amount = parseFloat($('#txtAmount').val());
var evt = (amount * quantity);
$('#txttotal').val(evt);
});
</script>
</head>
<body>
<input type="text" class="quan1" name="txtQuantity" id="txtQuantity"/>
<input type="text" id="txtAmount" class="quan1" name="txtAmount" value="4" disabled="" />
<input type="text" class="quan1" id="txttotal" name="txttotal" disabled="" /> <br>
</body>
</html>
var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);
hope this helps
Extra : Read Events and
Triggers
if you are using jquery you can do like this.
Solution 1
$('#txtQuantity').on('keypress', function (event) {
if(event.which === 13){
var quantity = parseFloat($(this).val()) || 0;
var amount = parseFloat($('#txtAmount').val());
var evt = (amount * quantity);
$('#txttotal').val(evt);
}
});
Solution 1 Demo
Solution 2
$('#txtQuantity').bind('input',function(){
var quantity = parseFloat($(this).val()) || 0;
var amount = parseFloat($('#txtAmount').val());
var evt = (amount * quantity);
$('#txttotal').val(evt);
});
Solution 2 Demo
Note:
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. older browsers you can use the "Keyup" event.
If you need to compute the value immediatly whithout the user pressing enter, bind a keyup event to the text box
var compute = function(){
var quantity = parseFloat($("#txtQuantity" ).val()) || 0;
var amount = parseFloat($('#txtAmount').val());
var total = (amount * quantity);
$('#txttotal').val(total);
}
$( "#txtQuantity" ).keyup(compute);
Im creating a form where i want the user to fill out an amount, and then show at the bottom of the form. Then if there is a checkbox checked it adds 21 to the value within the input field so far i have this, but its not quite working.
http://jsfiddle.net/vePbV/
<label>Desired amount</label> <input name="tbDesiredAmount" type="number" id="tbDesiredAmount" min="50" />
<label>Include Apron?</label> <input id="cb_Apron" type="checkbox" name="cb_Apron" />
<p>Total: £<span id="total">0</span>.00</p>
$('#tbDesiredAmount').blur(function() {
var value = $('#tbDesiredAmount').val();
$("#total").empty().append(value);
});
$('#cb_Apron').blur(function() {
var value = $('#tbDesiredAmount').val();
var apron = 21;
var total = value + apron;
$("#total").empty().append(total);
});
So and example of what i want it to do.
Type 70 into "desired amount", show 70 in #total when you focus off the input field.
Check apron tickbox, adds 21 to the desired amount so displays 91 in #total
if you uncheck the apron checkbox, it will remove 21 from the figure in #total
if i change the desired amount, it will update the #total, this needs to work with the tickbox checked and the tickbox not checked.
Any help would be greatly appreciated as im rather stuck at the moment.
Try this Use parseInt()
var apron = 21;
$('#tbDesiredAmount').keyup(function () {
var value = $('#tbDesiredAmount').val();
if ($('#cb_Apron').is(':checked')) {
var total = parseInt(value) + parseInt(apron);
$("#total").empty().append(total);
} else {
$("#total").empty().append(value);
}
});
$('#cb_Apron').click(function () {
if ($(this).is(':checked')) {
var value = $('#tbDesiredAmount').val();
var total = parseInt(value) + parseInt(apron);
$("#total").empty().append(total);
} else {
var tot = parseInt($("#total").text()) - (parseInt(apron))
$("#total").empty().append(tot);
}
});
DEMO
I'm a noob at Javascript, but I'm trying to implement something on my website where users can type a quantity, and the subtotal updates dynamically as they type.
For example: if items are 10 dollars each, and a user types 5 in the text field I would like it to show $50 next to the text box. Pretty simple multiplication, but I don't know how to do it with Javascript. I think onKeyPress somehow? Thanks!
Assuming the following HTML:
<input type="text" id="numberField"/>
<span id="result"></span>
JavaScript:
window.onload = function() {
var base = 10;
var numberField = document.getElementById('numberField');
numberField.onkeyup = numberField.onpaste = function() {
if(this.value.length == 0) {
document.getElementById('result').innerHTML = '';
return;
}
var number = parseInt(this.value);
if(isNaN(number)) return;
document.getElementById('result').innerHTML = number * base;
};
numberField.onkeyup(); //could just as easily have been onpaste();
};
Here's a working example.
You should handle 'onkeyup' and 'onpaste' events to ensure you capture changes by keyboard and via clipboard paste events.
<input id='myinput' />
<script>
var myinput = document.getElementById('myinput');
function changeHandler() {
// here, you can access the input value with 'myinput.value' or 'this.value'
}
myinput.onkeyup = myinput.onpaste = changeHandler;
</script>
Similarly, use getElementById and the element's innerHTML attribute to set the contents of an element when you want to show the result.