I have this text box:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
I want to divide sum_cleared by 0.85 then multiply the result by 0.94 and subtract it from the original value that is typed in sum_cleared and show the final result in:
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>
I want to do this dynamically using the onchange and oninput events so it updates the value of sum_total as the user types the value on sum_cleared.
What is the easiest way to accomplish this?
Thank you so much
I was able to do it doing the following:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared"
class="form-control"
oninput="GetTotal(this.value)" onchange="GetTotal(this.value)"/>
</div>
<div class="form-group">
<label>Total Commission</label>
<input type="text" name="sum_total" id="sum_total"
class="form-control total" readonly/>
</div>
Then adding a small script:
<script type="text/javascript">
function GetTotal(valNum) {
document.getElementById("sum_total").value=valNum/0.85*0.94-valNum
}
</script>
you can do like:
const input = document.querySelector('#sum_cleared');
const output = document.querySelector('#sum_total');
input.addEventListener('input', update);
input.addEventListener('change', update);
function update() {
const updated = input.value - ((input.value / 0.85) * 0.94);
output.value = updated;
}
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>
Related
I want to auto compute the extract fee, estimated value and num vehicle after I input a value in to tonnage.
I used a Bootstrap modal for this but as soon I put a value in tonnage it doesn't work. I'm confused right now.
$(document).ready(function() {
$('body').on('keyup', '#tonnage', function() {
var tonnage = $("#tonnage").val();
var num_vehicle;
if (tonnage <= 20) {
num_vehicle = 1;
$("#num_vehicle").val(num_vehicle);
} else {
num_vehicle = tonnage / 20;
$("#num_vehicle").val(num_vehicle);
}
var total_estimate_value = num_vehicle * 6000;
$("#estimated_value").val(total_estimate_value);
var total_extraction_fee = num_vehicle * 6000 * 0.1;
$("#extraction_fee").val(total_extraction_fee);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-6">
<label for="inputCity" class="form-label">Volume/Tonnage</label>
<input type="text" class="form-control" id="tonnage" name="tonnage">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">Extraction Fee</label>
<input type="text" class="form-control" id="extraction_fee" name="extraction_fee" readonly="">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">Estimated Value</label>
<input type="text" class="form-control" id="estimated_value" name="estimated_value" readonly="">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">No. of Vehicle</label>
<input type="text" class="form-control" id="num_vehicle" name="num_vehicle" readonly="">
</div>
The main issue is because you don't round the result of tonnage / 20, so you get a fraction of a vehicle, eg. 21 tons = 1.05 vehicles, instead of found up to the nearest integer, eg. 21 tons = 2 vehicles. This can be achieved using Match.ceil().
Also, be careful of implicit type conversions from string to int/floats. It's better to be explicit with this, as in the following example:
jQuery($ => {
$(document).on('keyup', '#tonnage', function() {
var tonnage = parseFloat($(this).val());
var numberOfVehicles = Math.ceil(tonnage / 20);
$('#num_vehicle').val(numberOfVehicles);
var total_estimate_value = numberOfVehicles * 6000;
$("#estimated_value").val(total_estimate_value);
var total_extraction_fee = numberOfVehicles * 6000 * 0.1;
$("#extraction_fee").val(total_extraction_fee);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-md-6">
<label for="inputCity" class="form-label">Volume/Tonnage</label>
<input type="text" class="form-control" id="tonnage" name="tonnage">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">Extraction Fee</label>
<input type="text" class="form-control" id="extraction_fee" name="extraction_fee" readonly="">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">Estimated Value</label>
<input type="text" class="form-control" id="estimated_value" name="estimated_value" readonly="">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">No. of Vehicle</label>
<input type="text" class="form-control" id="num_vehicle" name="num_vehicle" readonly="">
</div>
I am trying to auto calculate the discount amount by filling in two input fields but I don't know what am I doing wrong. What I want is that as I fill both inputs it appears the result in a third input.
<div class="form-group col-md-2">
<label for="sale_price">Precio de Venta</label>
<input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" onkeyup="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount_percentage">Porcentaje de descuento (%)</label>
<input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount">Descuento</label>
<input type="number" name="discount" placeholder="discount" class="form-control">
</div>
<script type="text/javascript">
function discount() {
var x;
(document.getElementById('saleP').document.getElementById('discountP')) / 100 = x
}
</script>
Does anyone knows what I am doing wrong?
Not sure what your thought was behind the example line.
I've made the following changes:
Added an id to the last input to target it
<input id="discount">
Get price input
const price = document.getElementById('saleP').value;
Get percentage value
const percentage = document.getElementById('discountP').value;
Calculate discount
const discount = price / 100 * percentage;
Set to last input
document.getElementById('discount').value = discount;
function discount(){
const price = document.getElementById('saleP').value;
const percentage = document.getElementById('discountP').value;
const discount = price / 100 * percentage;
document.getElementById('discount').value = discount;
}
<div class="form-group col-md-2">
<label for="sale_price">Precio de Venta</label>
<input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" onkeyup="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount_percentage">Porcentaje de descuento (%)</label>
<input type="number" name="discount_percentage" class="form-control" id="discountP" onkeyup="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount">Descuento</label>
<input type="number" name="discount" placeholder="discount" id="discount" class="form-control" >
</div>
Well you are not inputting variable x value into anything . If you add onchange event also, than it will work if user uses to increase decrease value using buttons.
Instead of adding two events you can add oninput for dynamic changes whether user input values using keyboard or buttons
function discount() {
var buyActualPrice = document.getElementById('saleP').value
var cardDisc = document.getElementById('discountP').value
var buyAtDiscAmount = (buyActualPrice * cardDisc) / 100
document.getElementById('DiscountAmount').value = buyAtDiscAmount
var priceAfterDisc = buyActualPrice - buyAtDiscAmount
document.getElementById('PriceAfterDisc').innerHTML = priceAfterDisc
}
document.querySelectorAll("#DiscountAmount").forEach(discount)
<div class="form-group col-md-2">
<label for="sale_price">Price</label>
<input type="number" pattern="[0-9]+([\.,][0-9]+)?" step="00.01" name="sale_price" class="form-control" id="saleP" oninput="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount_percentage">Percentage disc. (%)</label>
<input type="number" name="discount_percentage" class="form-control" id="discountP" oninput="discount();">
</div>
<div class="form-group col-md-3">
<label for="discount">Discount Amount</label>
<input type="number" name="discount" placeholder="discount" class="form-control" id="DiscountAmount">
</div>
<div>Price after discount applied : <span id="PriceAfterDisc"></span></div>
The last line in JavaScript is added so that if there are initial values than the results are shown at the start before any event
What I am trying to achieve is for the value of the id="origin" input field to be updated as you type in the id="pickup" field.
const pickup = document.querySelector('#pickup')
const dropoff = document.querySelector('#dropoff')
const origin = document.querySelector('#origin')
const destination = document.querySelector('#destination')
const submit = document.querySelector('#submitForm')
pickup.addEventListener('input', (e) => {
origin.value = e.target.value
})
.hidden {
opacity: 0;
}
<form>
<div class="form-group">
<label for="pickup">Pickup</label>
<input type="text" class="form-control" id="pickup" aria-describedby="pickupHelp">
<input type="text" class="form-control hidden" id="origin" value="empty">
<small id="pickupHelp" class="form-text text-muted">Enter your pickup location</small>
</div>
<div class="form-group">
<label for="pickup">Drop-off</label>
<input type="text" class="form-control" id="dropoff" aria-describedby="dropoffHelp">
<input type="text" class="form-control hidden" id="destination" value="">
<small id="dropoffHelp" class="form-text text-muted">Enter your drop-off location</small>
</div>
<button type="submit" class="btn btn-primary" id="submitForm">Submit</button>
</form>
I found the solution I was looking for. Sorry for not clearly stating what I wanted to do.
pickup.addEventListener('input', (e) => {
//changed to .defaultValue instead of just .value
origin.defaultValue = e.target.value
})
I have this code
$(function() {
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
});
and this fields in my form
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>
The logic is simple:
get price
get DP
print minus results in remained input
but somehow it doesn't print anything in remained input.
Any idea what I did wrong?
Your code is executing on page load and the value of the inputs are empty.
You should execute your code on some event like the following way:
$(function() {
$('#dp, #price').on('input', function(){
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>
I think you should put the calculation to ready function
because it is asynchronous
$( document ).ready(function() {
console.log( "ready!" );
// calculation
});
Or better use angular ... Instead of jQuery
the calculation is right but it doen one time on page ready event
add manual button to tell javascrip when to calculate the value
alos add event listener to automatically call on change
<div class="col-md-3">
<label for="price">Price *</label>
<input type="number" class="form-control" id="price" name="price">
</div>
<div class="col-md-3">
<label for="dp">DP *</label>
<input type="number" class="form-control" id="dp" name="dp">
</div>
<div class="col-md-3">
<label for="remained">Remained *</label>
<input type="number" class="form-control" id="remained" name="remained">
</div>
<button type="button"
onclick="cal()">
cal
</button>
$(function() {
document.getElementById("price").addEventListener("change",cal);
document.getElementById("dp").addEventListener("change",cal);
});
function cal(){
if(document.getElementById('price') !== null && document.getElementById('dp') !== null){
var price = document.getElementById('price').value;
var deposite = document.getElementById('dp').value;
document.getElementById('remained').value = parseInt(price)-parseInt(deposite);
}
}
The js code runs on the initial loading of webpage. The js code must be called by an onclick or an onkeyup
I want to be able to check two input field values (return and stakePlaced) e.g. 100 and 20
if the result field = win, then perform calculation: return (minus - ) stakePlaced and then display the result in another field called profit.
PHP is being used to pull data from table --- ignore the PHP code.
HTML
<div class="form-group">
<label for="stakePlaced">Stake Placed</label>
<input type="text" class="form-control mb-2" placeholder="stakePlaced" name="stakePlaced" value="<?php echo $stakePlaced ?>">
</div>
<div class="form-group">
<label for="result">Result</label>
<input type="text" class="form-control mb-2" placeholder="result" name="result" id="result" onchange="calcula" value="<?php echo $result ?>">
</div>
<div class="form-group">
<label for="return">Return</label>
<input type="text" class="form-control mb-2" placeholder="return" name="return" id="return" value="<?php echo $return ?>">
</div>
<div class="form-group">
<label for="return">Profit</label>
<input type="text" class="form-control mb-2" placeholder="profit" name="profit" id="profit" value="<?php echo $profit ?>">
</div>
JS
function calcula(){
$(document).ready(function(){
$("#result").keyup(function(){
if (this.value == "Win"){
var vreturn = document.getElementById('return').value;
var stake = document.getElementById('stakePlaced').value;
var result = parseFloat(vreturn)-parseFloat(stake);
var secresult = result.toFixed(2);
document.getElementById('profit').value = secresult;
}
});
});
window.onload = calcula;
Your math is unclear... I don't know how the value could be Win when dealing with numeric values... But that may be something out of scope.
To get the input values by the name (since there is no id), you can use attribute selectors.
See below... Type "Win" in the "Result" field (second). It will output "0.00" in the "Profit" field (last).
$(document).ready(function(){
$("#result").keyup(function(){
if (this.value == "Win"){
console.log("Win!");
var vreturn = $("[name='return']").val();
var stake = $("[name='stakePlaced']").val();
var result = parseFloat(vreturn)-parseFloat(stake);
var secresult = result.toFixed(2);
$("[name='profit']").val(secresult);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="stakePlaced">Stake Placed</label>
<input type="text" class="form-control mb-2" placeholder="stakePlaced" name="stakePlaced" value="20">
</div>
<div class="form-group">
<label for="result">Result</label>
<input type="text" class="form-control mb-2" placeholder="result" name="result" id="result" value="100">
</div>
<div class="form-group">
<label for="return">Return</label>
<input type="text" class="form-control mb-2" placeholder="return" name="return" value="20">
</div>
<div class="form-group">
<label for="return">Profit</label>
<input type="text" class="form-control mb-2" placeholder="profit" name="profit" value="30">
</div>
And you don't need to have a $(document).ready(function(){ in a named function which runs at window.onload... ;)