I have two functions like this:
1:
$(".soma").blur(function(){
var total = 0;
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
$("#sub").val(total);
});
2:
$(".soma1").blur(function(){
var total1 = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$("#sub1").val(total1);
});
I need to get the difference between the two and put the value in the input in real time.
My code that doesn't work:
$(".soma").blur(function(){
var total4 = 0;
$(".soma").each(function(){
total4 = total4 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma1").blur(function(){
$(".soma1").each(function(){
total5 = total5 + Number($(this).val().replace(/\s/g, ''));
});
total6 = total4 - total5;
$("#sub1").val(total6.toFixed(2));
});
});
HTML:
<div class="form-group col-xs-1">
<input type="text" class="form-control1 Preco soma" name="Valor[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Valor">Total</label>
</div>
<div class="form-group col-xs-2">
<input type="text" class="form-control1 Preco soma1" name="Compra[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Compra">Valor de Compra</label>
</div>
<div class="form-group col-xs-4" style="float:right; margin-right: 2%; line-height: 2;">
<input type="text" class="form-control1" name="sub" id="sub3" readOnly="true" value="">
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="sub3">Diferença em Valor</label>
</div>
I don't just click on a function because they are two different sums.
Just do both calculations in one change.
$(".soma1, .soma").blur(function(){
var total1 = 0;
var total = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
console.log(total - total1);
});
Related
I create table add row Dynamically but my output be 3 not be 1
is it because of I use div class and not use table(tr & td) ?
example
enter image description here
This is My javascript
<script type="text/javascript">
$(document).ready(function () {
var counter = 0;
$("#add").on("click", function () {
var newRow = $("div.rounded");
var cols = "";
cols += '<label>Paket </label><input type="text" class="form-control col-md-5" name="paket"><div class="invalid-feedback">Input paket bosz!' + counter + '</div></div>';
cols += '<label>Quantity </label><input type="text" class="form-control col-md-5" name="quantity"><div class="invalid-feedback">Input Quantity!' + counter + '</div></div>';
cols += '<label>Biaya </label><input type="text" class="form-control col-md-5" name="biaya"><div class="invalid-feedback">Input Biaya' + counter + '</div></div>';
newRow.append(cols);
$("div.rounded").append(newRow);
counter++;
});
$("div.rounded").on("click", function (event) {
$(this).closest("form-group").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
This My View
Paket
Input paket bosz!
<div class="col-4" style="margin-right: -290px;">
<div class="form-group rounded">
<label class="ulang">Quantity </label>
<input type="text" class="form-control col-md-5" name="quantity">
<div class="invalid-feedback">
Input Quantity!
</div>
</div>
</div>
<div class="col-4" style="margin-right: -290px;">
<div class="form-group rounded">
<label class="ulang">Biaya </label>
<input type="text" class="form-control col-md-5" name="biaya">
<div class="invalid-feedback">
Input Biaya
</div>
</div>
<br><br><br> <!-- pembatasan antara add order now -->
</div>
i'm having trouble going trough making a calculator (sum only) of 5 inputs fields in html/javascript and i can't manage to find what's wrong in my code
i tried messing around with types such as int instead of var and passing the value into parseInt, i somehow managed to have a result like "11111" where it should be like "5" but alongside that case the result is never printed in the innerHTML even after i added the "if not null" condition
Here is my html
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute();">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
and here is my javascript
function ratingCompute()
{
var designValue = document.getElementById("design").value;
var plotValue = document.getElementById("plot").value;
var charValue = document.getElementById("character").value;
var enjoyValue = document.getElementById("enjoyment").value;
var musicValue = document.getElementById("music").value;
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
Any clue?
JavaScript is not a type variable language try using let or const. And here is how you properly parse it. If you did it already then its because of your variable declaration.
let designValue = parseInt(document.getElementById("design").value);
let plotValue = parseInt(document.getElementById("plot").value);
let charValue = parseInt(document.getElementById("character").value);
let enjoyValue = parseInt(document.getElementById("enjoyment").value);
let musicValue = parseInt(document.getElementById("music").value);
In javascript you should use keyword var/let/const instead of int. and you have to convert String type input value to int using parseInt method.
Please check this:
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute()">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
As mentioned by #Joshua Aclan, JavaScript does not have an "int" variable declaration, only "var". Also you have to cast all of the inputs to int or float, because otherwise you are adding strings and the values of input fields are always strings. Also the output is most likely empty because int designValue... produces an error.
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
I want to create a div to add the input field using the class name and display the value, and also create a button to add more field that has the same class as above, but only the first field can be used to add the input, I know how I tried is incorrect. I don't want to use ID, increase ID or related to ID. It may be better to increase the class name also but is there any way to keep the same class name and function working. Thanks in advance
Edited: My question part and my snippet part is not same for better understanding.
function addMoreSchedule8WDV() {
// alert('yeah');
$("#sch8_wdv").append('<div style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetName">Name</label><br>' +
'<input type="text" id="assetName" class="form-control">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDOP">DOP</label><br>' +
'<input type="date" id="assetDOP" class="form-control date_of_purchase">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetOC">OC</label><br>' +
'<input type="number" min="0" id="assetOC" class="form-control originalCost">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetWDV">WDV</label><br>' +
'<input type="number" min="0" id="assetWDV" class="form-control assWDV">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetADD">ADD</label><br>' +
'<input type="number" min="0" id="assetADD" class="form-control addition">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetEUL">EUL</label><br>' +
'<input type="number" min="0" id="assetEUL" class="form-control no_of_year">' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-12" style="padding-bottom: 10px;">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetBDA">BDA</label><br>' +
'<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDays">Day Used</label><br>' +
'<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetRateofDep">Rate of Dep.</label><br>' +
'<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDepAmount">Dep. Amount</label><br>' +
'<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetNetBlock">Net Block</label><br>' +
'<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="removeWDV">Remove</label><br>' +
'Remove Content' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$("#sch8_wdv").on("click", ".removeSch8", function() {
$(this).parent().parent().parent().parent().remove();
});
}
// trigger for Fixed Assets WDV
$(document).on('change', '#yearEnd, .date_of_purchase, .no_of_year, .addition, .originalCost, .assWDV', function() {
calculateWDVFixedAssets();
});
// end triggered
function calculateWDVFixedAssets() {
var current_year_input = $("#yearEnd").val()
var current_year = new Date(current_year_input + '-03-31');
var last_year = current_year_input - 1;
var last_year_correct = new Date(last_year + '-04-01');
var date_of_purchase = new Date($(".date_of_purchase").val());
var no_of_year = $('.no_of_year').val();
var original_cost = $('.originalCost').val();
var addition = $('.addition').val();
var wdv = $('.assWDV').val();
var bda, dayUsed;
if (last_year_correct < date_of_purchase) {
$(".originalCost").prop('disabled', true);
} else {
$(".originalCost").prop('disabled', false);
}
// below code is for calculate Day Used
if (date_of_purchase != '') {
if (date_of_purchase < last_year_correct) {
dayUsed = 365;
$(".dayUsed").val(dayUsed);
} else if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
dayUsed = Math.round(Math.abs((current_year.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
$(".dayUsed").val(dayUsed);
} else {
$(".dayUsed").val('');
$(".originalCost").val('');
console.log('error');
}
}
// below is for calculate BDA
if (no_of_year != '') {
if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
bda = (no_of_year * 365);
$(".bdaValue").val(bda);
} else if (date_of_purchase < last_year_correct) {
var bda2 = (no_of_year * 365);
var year_minus = Math.round(Math.abs((last_year_correct.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
var total = (+bda2 - +year_minus);
$('.bdaValue').val(total + 1);
} else {
$(".originalCost").val('');
console.log('error');
}
}
// rate of depreciation
if (original_cost != '' || addition != '' || wdv != '') {
var bdaPass = $('.bdaValue').val();
var s = ((+original_cost + +addition) * (5 / 100));
var c = (+wdv + +addition);
var n = (bdaPass / 365);
var xy = (s / c);
var yz = (1 / n);
var power = Math.pow(xy, yz);
var power_new = parseFloat(power.toFixed(2));
var new_total = (1 - +power) * 100;
$('.rateOfDep').val(parseFloat(new_total.toFixed(4)));
// rate of depreciation
var rate_of_dep = $('.rateOfDep').val();
var f_rod = ((+wdv + +addition) * (rate_of_dep / 100));
var day_used_rod = $(".dayUsed").val();
var s_rod = (day_used_rod / 365);
var total_rod = (f_rod * s_rod);
var round_total = Math.round(total_rod);
$('.depAmount').val(round_total);
// net block
var f_netBlock = (+wdv + +addition);
var dep_net = $('.depAmount').val();
var net_block = (+f_netBlock - +dep_net);
$('.netBlock').val(parseFloat(net_block.toFixed(2)));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<p> Try inserting Year Ended = 2018, Name = Test, DOP = 1st April, 2010, OC = 1250000, wdv = 686931, add = null(no need to enter), eul = 15 then it will give the output bda=2919, day used = 365, rate of dep = 25.8986, dep amt = 177906, net block = 509025..</p>
<p>Ignore the console error</p>
<div class="form-group">
<label for="yearEnd">Year Ended in</label>
<input type="number" min="0" name="yearEnded" id="yearEnd" class="form-control" placeholder="Eg:- 2001" required>
</div>
<div style="border-style: dotted; border-radius: 10px; border-width: thin;">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<label for="assetName">Name</label><br>
<input type="text" id="assetName" class="form-control">
</div>
<div class="col-md-2">
<label for="assetDOP">DOP</label><br>
<input type="date" id="assetDOP" class="form-control date_of_purchase">
</div>
<div class="col-md-2">
<label for="assetOC">OC</label><br>
<input type="number" min="0" id="assetOC" class="form-control originalCost">
</div>
<div class="col-md-2">
<label for="assetWDV">WDV</label><br>
<input type="number" min="0" id="assetWDV" class="form-control assWDV">
</div>
<div class="col-md-2">
<label for="assetADD">ADD</label><br>
<input type="number" min="0" id="assetADD" class="form-control addition">
</div>
<div class="col-md-2">
<label for="assetEUL">EUL</label><br>
<input type="number" min="0" id="assetEUL" class="form-control no_of_year">
</div>
</div>
</div>
<div class="col-md-12" style="padding-bottom: 10px;">
<div class="row">
<div class="col-md-2">
<label for="assetBDA">BDA</label><br>
<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">
</div>
<div class="col-md-2">
<label for="assetDays">Day Used</label><br>
<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">
</div>
<div class="col-md-2">
<label for="assetRateofDep">Rate of Dep.</label><br>
<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">
</div>
<div class="col-md-2">
<label for="assetDepAmount">Dep. Amount</label><br>
<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">
</div>
<div class="col-md-2">
<label for="assetNetBlock">Net Block</label><br>
<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">
</div>
</div>
</div>
</div>
<div id="sch8_wdv"></div>
Add More
Working fiddle.
You could attach the input event to both inputs at the same time as:
$(document).on('input', '.first_no, .second_no', function() {
var parent = $(this).parent();
var first_no = parent.find('.first_no').val();
var second_no = parent.find('.second_no').val();
var total = parent.find('.total');
if (!isNaN(first_no) && !isNaN(second_no)) {
total.val(+first_no + +second_no);
}
});
function addMoreField() {
$('#expanded').append(
'<div><br>' +
'<input type="number" class="first_no">' +
' plus ' +
'<input type="number" class="second_no">' +
' is equal ' +
'<input type="number" class="total">' +
'</div>'
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="number" class="first_no"> plus
<input type="number" class="second_no"> is equal
<input type="number" class="total">
</div>
<div id="expanded"></div>
<br>
<button onclick="addMoreField()">Add More</button>
Made a bit shorter version.
$(document).on('input', '.a, .b, .c', function() {
var i = $(this).parent().find('input');
i[2].value = parseInt(i[0].value) + parseInt(i[1].value);
});
$('#add').on('click', function() {
$('.main').append('\
<div class="computation">\
<input type="number" class="a"> + \
<input type="number" class="b"> = \
<input type="number" class="c">\
</div>\
');
});
.computation {
padding: 15px;
padding-bottom: 0;
}
button {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="computation">
<input type="number" class="a"> +
<input type="number" class="b"> =
<input type="number" class="c">
</div>
</div>
<button id="add">Add more</button>
var addFields = function() {
var container = $(".dynamic-section");
var newFields = $(".row:first").clone();
$(newFields).find("input").val("");
container.append(newFields);
};
var add = function(num1, num2) {
num1 = (num1.length > 0 && !isNaN(num1)) ? parseInt(num1) : 0;
num2 = (num2.length > 0 && !isNaN(num2)) ? parseInt(num2) : 0;
return num1 + num2;
}
$(document).on("keyup", ".first,.second", function(e) {
var currentRow = $(e.target.parentElement);
var first = currentRow.find(".first").val();
var second = currentRow.find(".second").val();
var result = currentRow.find(".result");
result.val(add(first, second));
});
body {
padding: 10px;
}
.row {
padding: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" >
<input type="number" class="first" placeholder="first"/> +
<input type="number" class="second" placeholder="second"/> =
<input type="number" class="result" placeholder="result"/>
</div>
<div class="dynamic-section"></div>
<button type="button" name="addFields" onclick="addFields()">Add fields</button>
I have a sort of e-commerce in which you have multiple choice:
the first is by clicking some buttons to change the price of an object.
the second are checkboxes for some services in addition to the first choice (so I can have tot price= button+checkboxes)
Until here it's all good.
Finally, I have a range slider input to calculate the load, and I want that the max range to be = to the total price that is displayed in a div with id="aaa"
As you can see in the code or jsfiddle, the max price doesn't change like the aaa div (the max value remains = 5000)
how can I change it dynamically?
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
console.log(currentPrice)
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" +this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click",function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function(){
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount){
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount){
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1"/>
<div class="info-paragraph black" type="text" id="mutuo" >0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni" >10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
Working fiddle.
You need to update the max attribute of slider inside your getCheck() function like :
document.getElementById('slider1').max = currentPrice;
//checkboxes and buttons
var basicPrice = 5000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" + this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#aaa").text((currentPrice + total).toFixed(2));
$("#serv").html("services: " + services.join(", "));
document.getElementById('slider1').max = (currentPrice + total).toFixed(2);
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click", function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
//slider
$(document).ready(function() {
var zzz = document.getElementById('aaa').innerText;
document.getElementById('slider1').max = zzz;
});
const $mutuo = $("#mutuo"),
$rata = $("#rata"),
$anni = $("#anni"),
$slider1 = $("#slider1"),
$slider2 = $("#slider2"),
$max = $("#aaa").html();
function showAmount1(newAmount) {
document.getElementById('mutuo').innerHTML = newAmount;
$mutuo.val($("#mutuo").innerHTML);
update();
}
function showAmount2(newAmount) {
document.getElementById('anni').innerHTML = newAmount;
$anni.val($("#anni").innerHTML);
update();
}
function update() {
let interesseannuo = 1.60,
C = $mutuo.html(),
anni = $anni.html(),
i = interesseannuo / 12 / 100,
n = anni * 12,
rata = C * i / (1 - Math.pow(1 + i, -n));
$rata.html(rata.toFixed(2) + " €");
}
update();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="5000" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 5000 €</button><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="10000" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 10000 €</button><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="15000" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 15000 €</button><br><br><br><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<br><br><br>
<div class="paragraph" id="prezzo">
200 €</div>
<br><br><br>
<div class="info-text-wrapper">
<p class="info-paragraph black" id="aaa"></p>
<p class="info-paragraph black">Totale mutuo (€)</p>
<input type="range" min="0" max="" value="" step=".01" onchange="showAmount1(this.value)" id="slider1" />
<div class="info-paragraph black" type="text" id="mutuo">0</div><br><br><br>
<p class="info-paragraph black">Durata mutuo (anni)</p>
<input type="range" min="10" max="30" value="10" step="5" onchange="showAmount2(this.value)" id="slider2">
<div class="info-paragraph black" type="text" id="anni">10</div><br><br><br>
<p class="info-paragraph black">La tua rata</p>
<div class="paragraph" id="rata"></div><br>
</div>
I want txtFirstNumberValue - txtSecondNumberValue and then add it already exists txtThirdNumberValue value but in my case, it is not working.
function sub() {
var txtFirstNumberValue = document.getElementById('payment_image').value;
var txtSecondNumberValue = document.getElementById('pay_amount').value;
var txtThirdNumberValue = document.getElementById('pay_balance').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('pay_balance').value += result;
}
}
<div class="input-box">
<span>Amount</span>
<input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();" id="payment_image" class="number">
</div>
<div class="input-box">
<span>Expences</span>
<input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();" class="number">
</div>
<div class="input-box">
<span>Balance</span>
<input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance" class="number">
</div>
txtThirdNumberValue is coming dynamically from PHP code
call function second text onblur event
and change here
document.getElementById('pay_balance').value = parseInt(txtThirdNumberValue) + result;
function sub() {
var txtFirstNumberValue = document.getElementById('payment_image').value;
var txtSecondNumberValue = document.getElementById('pay_amount').value;
var txtThirdNumberValue = document.getElementById('pay_balance').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
//alert(result);
if (!isNaN(result)) {
document.getElementById('pay_balance').value = parseInt(txtThirdNumberValue) + result;
}
}
<div class="input-box">
<span>Amount</span>
<input placeholder="Payment Amount" type="text" name="payment_image" id="payment_image" class="number">
</div>
<div class="input-box">
<span>Expences</span>
<input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onblur="sub();" class="number">
</div>
<div class="input-box">
<span>Balance</span>
<input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance" class="number">
</div>
You need to convert already existing value from string to number before adding result to it. Here's how to do it:
function sub() {
var txtFirstNumberValue = document.getElementById('payment_image').value;
var txtSecondNumberValue = document.getElementById('pay_amount').value;
var txtThirdNumberValue = document.getElementById('pay_balance').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
var existing = parseInt(document.getElementById('pay_balance').value);
var newResult = result + existing;
document.getElementById('pay_balance').value = newResult;
}
}
<div class="input-box">
<span>Amount</span>
<input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();" id="payment_image" class="number">
</div>
<div class="input-box">
<span>Expences</span>
<input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();" class="number">
</div>
<div class="input-box">
<span>Balance</span>
<input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance" class="number">
</div>
I don't know what you are trying to do, but you should parseInt your 3rd value and then add it back.
Here is what you did wrong.
One more thing you should use radix value in your parseInt
function sub() {
var txtFirstNumberValue = document.getElementById('payment_image').value;
var txtSecondNumberValue = document.getElementById('pay_amount').value;
var txtThirdNumberValue = document.getElementById('pay_balance').value;
if (txtFirstNumberValue == "")
txtFirstNumberValue = 0;
if (txtSecondNumberValue == "")
txtSecondNumberValue = 0;
var result = parseInt(txtFirstNumberValue, 10) - parseInt(txtSecondNumberValue, 10);
if (!isNaN(result)) {
//This is what you should be doing. You didn't convert the value to int
//You were concatinating it as a string
var payVal = parseInt(document.getElementById('pay_balance').value, 10);
payVal += result;
document.getElementById('pay_balance').value = payVal;
}
}
<div class="input-box">
<span>Amount</span>
<input placeholder="Payment Amount" type="text" name="payment_image" onkeyup="sub();" id="payment_image" class="number">
</div>
<div class="input-box">
<span>Expences</span>
<input placeholder="Expenses" type="text" name="expenses" id="pay_amount" onkeyup="sub();" class="number">
</div>
<div class="input-box">
<span>Balance</span>
<input placeholder="Balance" value="15" readonly="readonly" type="text" name="pay_balance" id="pay_balance" class="number">
</div>