How to calculate total with AutoNumeric - javascript

I'm using http://autonumeric.org/ or https://github.com/autoNumeric/autoNumeric/blob/master/README.md
How to fix
When I use JS function to calculate the sum total appear, but not as formatted AutoNumeric as I want it to be
When mouse hover the calculated field, it disappears
var taxRate = 0.10
function calculateAmount() {
var elemsAmount = document.getElementsByName("tAmount")
var total = 0
elemsAmount.forEach(function(e){
total += Number(e.value.replace(',',''))
})
document.getElementById("total").value = total
document.getElementById("tax").value = total*taxRate
document.getElementById("finalTotal").value = total+total*taxRate
}
document.getElementById("tableBox").addEventListener("change",calculateAmount)
new AutoNumeric.multiple('[contenteditable="true"]', 'dotDecimalCharCommaSeparator')
<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>
<div id="tableBox">
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount" contenteditable="true">
<label>input</label>
</div>
</div>
</div> <!-- name tableRow -->
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount" contenteditable="true">
<label>input</label>
</div>
</div>
</div> <!-- name tableRow -->
</div> <!-- id tableBox -->
Auto JS Calculation fields
<div class="input-field">
<input type="text" id="total" contenteditable="true">
<label for="total">Total</label>
</div>
<div class="input-field">
<input type="text" id="tax" contenteditable="true">
<label for="tax">Tax</label>
</div>
<div class="input-field">
<input type="text" id="finalTotal" contenteditable="true">
<label for="finalTotal">Final Total</label>
</div>
Expect output #,###.##<br>
Also the problem is when mouse hover on the Calculation field, it disappears
Thank you in advance


You should initialise and save the Autonumeric fields and use the Autonumeric API to update the value using .set().
You can do the same with the input fields and use .getNumber() to do your calculations.
As far as I know you can safely remove the contenteditable="true" attribute from <input/> elements — these are designed to be "editable".
const taxRate = 0.10
const config = 'dotDecimalCharCommaSeparator'
const totalInput = new AutoNumeric('#total', config)
const taxInput = new AutoNumeric('#tax', config)
const finalTotalInput = new AutoNumeric('#finalTotal', config)
const elemsAmount = new AutoNumeric.multiple('[name="tAmount"]', config)
const tableBox = document.getElementById('tableBox')
function calculateAmount() {
let total = 0
elemsAmount.forEach(function(e) {
total += e.getNumber()
})
totalInput.set(total)
taxInput.set(total * taxRate)
finalTotalInput.set(total + total * taxRate)
}
tableBox.addEventListener('change', calculateAmount)
<script src="https://unpkg.com/autonumeric" type="text/javascript"></script>
<div id="tableBox">
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount">
<label>input</label>
</div>
</div>
</div>
<div name="tableRow">
<div class="col s3">
<div class="input-field">
<input type="text" name="tAmount">
<label>input</label>
</div>
</div>
</div>
</div>
Auto JS Calculation fields
<div class="input-field">
<input type="text" id="total">
<label for="total">Total</label>
</div>
<div class="input-field">
<input type="text" id="tax">
<label for="tax">Tax</label>
</div>
<div class="input-field">
<input type="text" id="finalTotal">
<label for="finalTotal">Final Total</label>
</div>

Related

Checking box values and disable button and show error message in Javascript

I need to make sure the value of a particular set of boxes should not exceed the value of other sets of boxes...
Set 1: Consultation fee, Other fee (total_fee will show the sum of these)
Set 2: cash, gpay, upi, card, others (total fee paid will show the sum of these)
The above action working pretty well...
Now, I want to make sure set 2 of total value should not exceed set 1 of total value. if so, I need to disable btn and also need to show an error message as "Sum of Receiving Payment exceeds Total Fee, Please Check!"...
How to do that?!
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
<!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
<script type="text/javascript">
$(function() {
const paid_cash = document.getElementById("paid_cash");
const paid_gpay = document.getElementById("paid_gpay");
const paid_upi = document.getElementById("paid_upi");
const paid_card = document.getElementById("paid_card");
const paid_others = document.getElementById("paid_others");
const total_fee_paid = document.getElementById("total_fee_paid");
document.getElementById("paid_cash").addEventListener("input", sum);
document.getElementById("paid_gpay").addEventListener("input", sum);
document.getElementById("paid_upi").addEventListener("input", sum);
document.getElementById("paid_card").addEventListener("input", sum);
document.getElementById("paid_others").addEventListener("input", sum);
function sum() {
total_fee_paid.value = Number(paid_cash.value) + Number(paid_gpay.value) + Number(paid_upi.value) + Number(paid_card.value) + Number(paid_others.value);
}
});
</script>
<!-- Total Fee Calculation from Consultation fee and Other fee-->
<script type="text/javascript">
$(function() {
const fee1 = document.getElementById("visit_cons_fee");
const fee2 = document.getElementById("visit_other_fee");
const total_fee = document.getElementById("total_fee");
document.getElementById("visit_cons_fee").addEventListener("input", sum);
document.getElementById("visit_other_fee").addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value) + Number(fee2.value);
}
});
</script>
<script type="text/javascript">
// access the button from the html
const btn = document.getElementById("btnSubmit");
// access input boxes total_fee, total_fee_paid
const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
document.getElementById("visit_cons_fee"),
document.getElementById("visit_other_fee"),
document.getElementById("paid_cash"),
document.getElementById("paid_gpay"),
document.getElementById("paid_upi"),
document.getElementById("paid_card"),
document.getElementById("paid_others")
];
// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
btn.disabled = (+visit_cons_fee.value + +visit_other_fee.value < +paid_cash.value + +paid_gpay.value + +paid_upi.value + +paid_card.value + +paid_others.value);
document.getElementById("error").innerText = (+visit_cons_fee.value + +visit_other_fee.value < +paid_cash.value + +paid_gpay.value + +paid_upi.value + +paid_card.value + +paid_others.value ?
'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
''
);
};
// add event-listener to each input to invoke the validate method
[paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
box => {
box.addEventListener('keyup', validatePrices)
});
</script>
</head>
<body>
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee" name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control" name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control" id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control" id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control" name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control" name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control" id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<center>
<div id="error" class='error-text'>Test</div>
</center><br/><br/>
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</body>
</html>

Your logic seems good, but you call getElementById before DOM is ready, which means all elements are not available, and you try to call addEventListener to undefined elements.
To avoid that situation, you can add
$(document).ready(() => { //your logic })
Side note that I also improved your logic in validatePrices.
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
<!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
<script type="text/javascript">
$(function() {
const paid_cash = document.getElementById("paid_cash");
const paid_gpay = document.getElementById("paid_gpay");
const paid_upi = document.getElementById("paid_upi");
const paid_card = document.getElementById("paid_card");
const paid_others = document.getElementById("paid_others");
const total_fee_paid = document.getElementById("total_fee_paid");
paid_cash.addEventListener("input", sum);
paid_gpay.addEventListener("input", sum);
paid_upi.addEventListener("input", sum);
paid_card.addEventListener("input", sum);
paid_others.addEventListener("input", sum);
function sum() {
total_fee_paid.value = Number(paid_cash.value) + Number(paid_gpay.value) + Number(paid_upi.value) + Number(paid_card.value) + Number(paid_others.value);
}
});
</script>
<!-- Total Fee Calculation from Consultation fee and Other fee-->
<script type="text/javascript">
$(function() {
const fee1 = document.getElementById("visit_cons_fee");
const fee2 = document.getElementById("visit_other_fee");
const total_fee = document.getElementById("total_fee");
fee1.addEventListener("input", sum);
fee2.addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value) + Number(fee2.value);
}
});
</script>
<script type="text/javascript">
$(document).ready(() => {
// access the button from the html
const btn = document.getElementById("btnSubmit");
// access input boxes total_fee, total_fee_paid
const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
document.getElementById("visit_cons_fee"),
document.getElementById("visit_other_fee"),
document.getElementById("paid_cash"),
document.getElementById("paid_gpay"),
document.getElementById("paid_upi"),
document.getElementById("paid_card"),
document.getElementById("paid_others")
];
const total_fee = document.getElementById("total_fee");
const total_fee_paid = document.getElementById("total_fee_paid");
// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
const invalid = Number(total_fee.value) < Number(total_fee_paid.value);
btn.disabled = invalid;
document.getElementById("error").innerText = invalid ?
'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
''
};
// add event-listener to each input to invoke the validate method
[visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
(item) => {
item.addEventListener('keyup', validatePrices)
});
})
</script>
</head>
<body>
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee" name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control" name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control" id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control" id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control" name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control" name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control" id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<center>
<div id="error" class='error-text'>Test</div>
</center><br /><br />
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</body>
</html>

Here is a jQuery specific approach, it is a rework, but only because you are already loading the library. The only slight modifications to HTML being adding a class for payment specific fields as well as fee specific fields. This is a little more concise and readable, but ultimately, it is just another approach.
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number"
class="form-control field-consult-fee" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control field-consult-fee"
id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee"
name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control field-payment-type"
name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control field-payment-type"
id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control field-payment-type"
id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control field-payment-type"
name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control field-payment-type"
name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control"
id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group text-center mb-4">
<div id="error" class='error-text'>Test</div>
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</div>
<script>
$(document).ready(function () {
// store our payment fields in variables
const $paid_cash = $("#paid_cash")
const $paid_gpay = $("#paid_gpay")
const $paid_upi = $("#paid_upi")
const $paid_card = $("#paid_card")
const $paid_others = $("#paid_others")
// store our fee fields in variables
const $fee1 = $("#visit_cons_fee")
const $fee2 = $("#visit_other_fee")
const $total_fee = $("#total_fee")
// store our totals in variables
const $total_fee_paid = $("#total_fee_paid")
const $field_payment_type = $("input.field-payment-type")
// function to sum our payment fields and display the total
function sumPayments() {
const payment_fields = [$paid_cash, $paid_gpay, $paid_upi, $paid_card, $paid_others]
const total_fee_paid = payment_fields.reduce((a, b) => a + +b.val(), 0)
$total_fee_paid.val(total_fee_paid)
validate()
}
// function to sum our fee fields and display the total
function sumFees() {
const fee_fields = [$fee1, $fee2];
const total_fee = fee_fields.reduce((a, b) => a + +b.val(), 0)
$total_fee.val(total_fee)
validate()
}
// function to validate our payment does not exceed our fee
function validate() {
const $btn_submit = $("#btnSubmit")
const total_fee = +$total_fee.val()
const total_fee_paid = +$total_fee_paid.val()
let disabled = false
let error = " "
if (total_fee_paid > total_fee) {
error = "Total paid amount cannot be greater than total fee"
disabled = true
}
$("#error").html(error)
$btn_submit.attr("disabled", disabled)
}
// add event listeners to our payment_type fields
$field_payment_type.on('input', sumPayments)
$field_consult_fee.on('input', sumFees)
});
</script>
</body>
</html>

Dynamically Calculating field value with js and php

So ive been trying to calculate automatically exchange rates with a rate i get from php and send it to a js script. Unfortunates the first field is calculated correctly but the second stops at a limit. ive tried this approach
<fieldset>
<div class="col-12" style="margin-left: -1rem !important;">
<h6 class="py-50" for="paypal">Choose What You Sell</h6>
</div>
<div class="row mb-75">
<div class="col-12 d-flex">
<div class="cursor-pointer d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/btc.png" alt="BTC Logo">
<input type="radio" name="option" onchange="hideB(this)" id="btc" value="BTC" checked>
</label>
</div>
<div class="cursor-pointer pl-1 d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/eth.png" height="30" alt="ETH Logo">
<input type="radio" name="option" onchange="hideA(this)" id="eth" value="ETH">
</label>
</div>
</div>
<hr>
</div>
<div class="row" id="A">
<div class="col-sm-4">
<div class="form-group">
<label for="value_n">Enter Your amount in USD </label>
<input type="text" id="value_btc" name="value_btc" class="form-control required" onkeyup="mult(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in BTC</label>
<input type="text" class="form-control" id="btc_rate" name="btc_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (BTC - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_btc" name="receive_btc" readonly="readonly" placeholder="Amount in Naira" >
</div>
</div>
</div>
<div class="row" id="B" style="display:none">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName13">Enter Your amount in USD </label>
<input type="text" id="value_eth" name="value_eth" class="form-control required" onkeyup="mult2(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in ETH</label>
<input type="text" class="form-control" id="eth_rate" name="eth_rate" name="eth_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (ETH - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_eth" name="receive_eth" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
</div>
im using the js below to calculate the field value for btc and how much the client will recieve:
<script>
function mult(value_btc) {
var btc_rate = "<?php echo $btc_rate; ?>";
<!-- END: Theme JS-->
var x, y ;
x = value_btc / btc_rate ;
y = btc_rate * 4 ;
document.getElementById('btc_rate').value = x;
document.getElementById('receive_btc').value = y;
}
</script>
<script>
function mult2(value_eth) {
var eth_rate = "<?php echo $eth_rate; ?>";
var x, y ;
x = value_eth / eth_rate ;
y = eth_rate * 4 ;
document.getElementById('eth_rate').value = x;
document.getElementById('receive_eth').value = y;
}
</script>
the x values work correctly but the y value stops at a limit.
will really appreciate if someone can help out. thanks in advance

How to compute surface-area using javascript?

I have the following 3 inputs: Length, Width, Height.
Using javascript I need to compute the area of a cube, but before that I can't event get the fucntion to work when I press the button "CALCULEAZA". How can I make the "calculeaza" function work?
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
</script>
I also know that using scripts in the same file is not ok, but I am going to modify it after I undertand how it works. It is my first JS 'thing' I do. Thank you in advance!

Use e.preventDefault() to not redirect on click of submit button. Otherwise the code is running fine.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<form>
Lungime:<br>
<input type="text" name="firstname" id="lungime"><br>
Latime:<br>
<input type="text" name="lastname" id="latime"><br>
Inaltime:<br>
<input type="text" name="lastname" id="inaltime"><br>
<button id="submit" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA</button>
</form>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<div class="col-sm-4">
<h3>Seminte Demetra CR</h3>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById('value-zone').hidden = true;
});
function calculeaza(){
var x = parseFloat(document.getElementById('lungime').value);
var y = x/2;
console.log("aaaaaa");
document.getElementById('value-zone').hidden = false;
}
$("#submit").click((e)=>{e.preventDefault()})
</script>

change your button to:
<button id="submit" type="button" onclick="calculeaza()" style="margin- top:5%;">CALCULEAZA
by default, the button is of type SUBMIT, which will submit the form. You can use javascript to disable the function or simply make a minor change to your button.

Perhaps something like this:
<div class="col-sm-4">
<div class="row">
<h3>Calculator de Folie</h3>
<div class="form-group">
<label class="col-form-label" for="length">length</label>
<input type="number" class="form-control" id="length">
</div>
<div class="form-group">
<label class="col-form-label" for="width">width</label>
<input type="number" class="form-control" id="width">
</div>
<div class="form-group">
<label class="col-form-label" for="height">height</label>
<input type="number" class="form-control" id="height">
</div>
<button onclick="calculeaza()" style="margin-top:5%;">CALCULEAZA</button>
</div>
<div class="row container fluid">
<h1 id="value-zone"><span id="value">100</span>m2</h1>
</div>
</div>
<script>
document.getElementById('value-zone').hidden = true;
// calculates the surface area of a cuboid and updates #value with the answer
function calculeaza() {
var l = parseFloat(document.getElementById('length').value);
var w = parseFloat(document.getElementById('width').value);
var h = parseFloat(document.getElementById('height').value);
if (!isNaN(l) && !isNaN(w) && !isNaN(h)) {
document.getElementById('value-zone').hidden = false;
document.getElementById('value').innerHTML = 2*(l*w + w*h + l*h);
}
}
</script>
Removed the <form> and used bootstrap's "form-groups" instead. No jquery needed for this since it seems you use document.getElementById anyways.

does not show error in my captcha code as security code does not match

<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Address</label>
<div class="col-sm-3">
<input id="address" class="address" type="text" name="address"
onchange="IsValidAddress(this.form.address.value)" required="required" >
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Zip Code :</label>
<div class="col-sm-3">
<input id="zipcode" class="zipcode" type="text" name="zipcode" onchange="IsValidZipCode(this.form.zipcode.value)" required="required" >
<br />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> City</label>
<div class="col-sm-3">
<input class="form-control" name="city" type="text" id="city" required="required" value="">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> State</label>
<div class="col-sm-3">
<input class="form-control" name="state" type="text" id="state" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Country</label>
<div class="col-sm-3">
<input class="form-control" name="country" type="text" id="country" value="" required="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> Fax</label>
<div class="col-sm-3">
<input class="form-control" name="fax" type="text" id="fax" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Captcha</label>
<div class="col-sm-2">
</div>
<div class="col-sm-3">
<form name="review" ACTION="playing-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000"></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit" class="btn1" name="submit" id="send">
</form>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</div>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
my javascript code is written above html code but in this code i m writing below html code ......
does it effect my calling my function of captcha
does not show me error like security does not match?
if i click n submit button it redirect me to the thank you page
what is the problem with captcha validation
why it is not validation the match not done correctly
why it is directly accepting the form without validating the capctha?
what is the problem n the code?
cannot identify the error pease help me

Trying to get the total to generate from quantity and price

I've been working on this for a little longer then needed, but I can't find what is going wrong here. I think I've looked at it way too long. I need to get the items to add up after quantity is add to the form.
Here is my HTML
<div class="row-fluid container-cart">
<div class="span4">
<div class="thumbnail">
<img src="http://myurl.com/image.jpg" />
<div class="caption">
<h3 class="">Title</h3>
<p class="">Description</p>
<div class="row-fluid">
<div class="span6">
<p class="lead">
<span id="item-price">100</span>
<span class="price-integer">
<input type="hidden" value="100">
</span>
</p>
</div>
<div class="span6">
<span>Quantity</span>
<input type="text" name="" id="quantity" class="stored quantity" autocomplete="off" value="">
</div>
<div class="span6">
<input type="text" name="base-total" id="base-total" class="stored readonly base-total" value="" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span6">
Total:
<span class="total-cart">
<input type="text" name="total-cart" id="total-cart" class="stored readonly" value="" disabled="disabled">
</span>
</div>
Here is my JS
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find(".quantity input").val(), 10) * parseInt($(o).find(".price-integer input").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find(".base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});

Looks like you typed a wrong selector, it's the .quantity input, the .quantity is an input, so it won't have any children, maybe you want to mean the input.quantity which means finding the input having class quantity.
Demo.

Categories

Resources