update number in javascript on input change - javascript

I have a number in javascript that I need to update when an input is changed.
I want 'amount: 20000' to reflect what has been entered into the #customValue input multiplied by 100.
So if a user entered '30' in the input, 'amount: 20000' would be updated to 'amount: 3000'
Any ideas how I would accomplish this would be greatly appreciated! : )
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>
<script>
document.getElementById('customButton').addEventListener('click', function(e) {
handler.open({
amount: 20000
});
});
</script>

Your handler variable is undefined. In the example below, I'm adding an EventListener to the Purchase button. When a user clicks on this button, it will take the value of the input field and multiply it by 100.
You should validate whether the entered value is a valid integer.
document.getElementById('customButton').addEventListener('click', function(e) {
var customValue = document.getElementById('customValue').value;
// validate to check if customValue is a valid integer
console.log(parseInt(customValue) * 100); // log new amount to console
});
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>

document.getElementById('customButton').addEventListener('click', function(e) {
var value = document.getElementById("customValue").value * 100; // multiply the customValue by a 100 and assign it to the variable value
// use value whereever you like:
alert(value);
});
<input id="customValue" value="200" />
<button id="customButton">Purchase</button>

Related

Adding a validation for input type, so the user is not allowed to enter anything other than numbers with a min and max value

I'm trying to do this in HTML for now where I have a input field of type=number where I don't want the user to be able to type decimal values/special characters/alphabets at all. I also want the min=30 and max=300so if a user types 29 and clicks else where, the value in the field should change to the min which is 30. If the user types in a value greater than 300 and clicks elsewhere, then I want the value to change to 300 which is the max. I don't want to wait for the user to wait for them to click on a form button. This is what I have so far, where the error is that, the user can still type decimal, and type any value lower than 30. Very new to html/js. Feel free to help me with js implementation if you think that is easier.
<input type="number" min="30" max="300" step="1" oninput="validity.valid||(value=value.replace(/\D+/g, ''))" id="seconds" name="seconds" value="30">
<html>
<script>
function change(){
var inp = document.getElementById("box").value;
inp = Math.floor(inp);
if(inp<30){
document.getElementById("box").value = 30;
}
else if(inp>300){
document.getElementById("box").value = 300;
}
else {
document.getElementById("box").value = inp;
}
}
</script>
<BODY>
<input type= "number" onmouseout = "change()" id ="box"/>
</BODY>
</HTML>
this java script should do
use "onmouseout".

Enable submit button if value greater or equal to the specified value

I'm trying to enable the submit button in the form only if the second text value is equal or greater than the first text box value. I have checked for the solution before posting. I don't know what I am missing. Please help me regarding the same.
I have added the JSfiddle code on which I worked changing
Form Code
<form method="post" action="order.php">
First Number
<input type="text" id="total1" />
<br>
Second Number
<input type="text" id="total2" />
<br>
<input type="submit" value="Submit" disabled title="Not Relevant">
</form>
Script
setInterval(function () {
if ($('#total1').val() >= ('#total2').val())
$(":submit").removeAttr("disabled");
else
$(":submit").attr("disabled", "disabled");
}, 1);
JSFiddle Code
Don't use setInterval to check the values. This will block the thread from doing anything else because you are basically creating an infinite loop.
You only need to know compare the values when you submit. Then either submit or prevent the submit from happening with Event.preventDefault().
let $form = $('form');
let $total1 = $('#total1');
let $total2 = $('#total2');
$form.on('submit', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
if (val1 < val2) { // If condition is NOT met.
event.preventDefault(); // Default submit from happening.
return false; // Stop function.
}
});
Additionally you can listen for the change event on the form when a value in one of the inputs has changed and check the values there. Then based on the evaluation set the disabled property in the input button.
let $submitButton = $(':submit');
$form.on('input', function(event) {
let val1 = Number($total1.val());
let val2 = Number($total2.val());
let isDisabled = val1 < val2; // Will return true or false.
$submitButton.prop('disabled', isDisabled);
});
If you want to compare numbers then change the input type to number. Otherwise you will be comparing strings.
<input type="number" id="total1" />
<input type="number" id="total2" />

Replacing symbols on keyup

I have stumbled across on a problem I do not understand why it's even happening (not working).
What I have to do is just to replace 1 's amount value, for some reason I just can't lol.
When user enter amount, in case he enters ",", I have to change it to "." Instantly - live.
Here is the sample..
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val().replace(",", ".");
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
It's because you did not set the value of the textbox after changing its value. See working code below:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var $this = $(this), amount = $this.val();
$this.val(amount.replace(",", "."));
console.log('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
You computed the modified string but do not set it back to the field. If I understand your problem correctly this should work for you:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val(amount.replace(",", "."));
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
Note that .val() gets a value while .val(string) sets the value of the field to the specified string.

Calculate discount using jquery

I am calculating Discount using jquery. But I have a problem calculating the correct discount. My calculation gives me wrong result.
Here is my code
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '')
$('#cBalance').val((parseInt(amd)) - (parseInt(disc)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
I have a prepopulated value for cBalance input i.e.,1575. When I type discount value for example 500 in chDiscount input, it gives me 1020 and not 1075. And I want the value 1575 to be 1575 when there is no value or zero value in the chDiscount input. And the caculation keeps incrementing the cBalance value whenever I type new value in the chDiscount input, it does not increment from the default value.
My exptected output: When I type 500, I want the default value 1575 to be 1075. And if I delete the 1000 that I type, I want back the default value 1575 in cBalance. And If I type 5 in chDiscount, the default value would become 1570 and if I hit backspace to delete, it would become 1575 again.
How can I achieve this? Where did I go wrong? Please help.
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '') {
$('#result').val((parseInt(amd)) - (parseInt(disc)));
}else{
$('#result').val(parseInt(amd));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
<br>
<input type="number" id="result">
I added result field because otherwise you couldn't specify amd
As above mention code is just subtracting the main value. here is exact solution
<input type="number" id="cBalance" value="1575"> <br>
<input type="number" id="chDiscount"> <br>
<input type="number" id="result">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).on("change keyup blur", "#chDiscount", function() {
var main = $('#cBalance').val();
var disc = $('#chDiscount').val();
var dec = (disc/100).toFixed(2); //its convert 10 into 0.10
var mult = main*dec; // gives the value for subtract from main value
var discont = main-mult;
$('#result').val(discont);
});
JSFIDDLE

JQuery Autofill with Keyup function

I would like to put in "max" and "min" values in separate input fields and then have another set of input fields autofill with all the integers in between and included the min and max #'s. I've never used JS before so I'm not sure if there is a method for this or if you need to loop through the numbers?
$("#min1").keyup(function(){
$("#speed1").val(this.value);
});
$("#max1").keyup(function(){
$("#speed5").val(this.value);
});
Just add one event for the boths (use input instead of keyup it's more effecient when we want to track input field change) then call result() function that will clear result div then generate input fields :
function result(min,max){
$("#result").html("");
for(var i=min;i<=max;i++)
$("#result").append('<input type="number" value="'+i+'"/>');
}
$("body").on('input', '#min1,#max1', function(){
var min = $('#min1').val();
var max = $('#max1').val();
if( min!="" && max!="")
if( min<max )
result(min, max);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="min1" type="number" placeholder="min" value="0"/>
<input id="max1" type="number" placeholder="max" value="0"/>
<div id="result"></div>

Categories