We Keep Coding

Update price on change inlcuding on select

This is my fiddle:
https://jsfiddle.net/btekbtek/6gxztk4f/6/
When I type qty, I automatically calculate price.
I want also include select option that is adding
£1 per 1 qty.
If someone type 10 qty - price should be qty10*(£1*10)*price
Currently when I add:
// update price if option change
var optionprice = 0;
var getPriceOption = function() {
jQuery("#select_21").change(function() {
if (jQuery(this).val() === '63') {
optionprice = 0;
} else {
optionprice = 1;
}
}); //end update optionprice
return optionprice;
}; //end get PriceOption
console.log(getPriceOption);
getPriceOption is undefined. I was trying to add it after before and same result.
I cannot change anything in HTML, just in jQuery.

This was enough:
var updateprice = $("#select_21 option:selected").attr('price');
added in :
while (i--) {
if (qty >= tierPrices[i]['price_qty']) {
var updateprice = $("#select_21 option:selected").attr('price');
var calc_price = tierPrices[i]['price'] * qty + (updateprice*qty);
return (calc_price).toFixed(2)
}
}

updated values inside form do not transfer properly into new div

basically when you enter a value out of the specified range it gets updated to the minimum/maximum allowed, but the value of the var doesn't get updated to the max/min. (you can check by entering 1 into both forms and clicking on quote)
https://jsfiddle.net/epf4uyr6/
function cadCheck(input) {
if (input.value < 2) input.value = 2;
if (input.value >= 100) input.value = 99.99;
}
document.getElementById('cad').onkeyup = function() {
var cad = (this.value);
document.getElementById("cad-quote").innerHTML = "Market: $" +cad;
}

your values not updating properly because , keyup function executing first and then onchange(cadCheck) function execute.
your current logic is inside onchange function , thats why value not updating properly.
move this line in onkeyup function , and remove it from onchange.
document.getElementById('cad').onkeyup = function() {
if (this.value >= 100) this.value = 99.99;
var cad = (this.value);
document.getElementById("cad-quote").innerHTML = "Market: $" +cad;
}

jQuery updating function with input change from JS

I have a few functions and events in place that update invoice totals on change, paste, keyup and touchend which works great. However I have coded something that allows you to insert item data from a dropdown select and copies some things to input values however that does not update and now sure what changes I need to make for this to happen. Anyone have any ideas?
JSFiddle: http://jsfiddle.net/9m7q0mp8/ (if you click select product and add your see what I mean, it adds name and value, but I need it to update the subtotal and also the totals at bottom like it does, when you manually enter values in for an item).
JS:
$(document).on('click', ".item-select", function(e) {
e.preventDefault;
var product = $(this);
$('#insert').modal({ backdrop: 'static', keyboard: false }).one('click', '#selected', function(e) {
var itemText = $('#insert').find("option:selected").text();
var itemValue = $('#insert').find("option:selected").val();
$(product).closest('tr').find('#invoice_product').val(itemText);
$(product).closest('tr').find('#invoice_product_price').val(itemValue);
//updateTotals('#invoice_table');
//calculateTotal();
});
return false;
});
// add new product row on invoice
var cloned = $('#invoice_table tr:last').clone();
$(".add-row").click(function(e) {
e.preventDefault();
cloned.clone().appendTo('#invoice_table');
});
calculateTotal();
$('#invoice_table').on('change keyup paste touchend', '.calculate', function() {
updateTotals(this);
calculateTotal();
});
$('#invoice_totals').on('change keyup paste touchend', '.calculate', function() {
calculateTotal();
});
function updateTotals(elem) {
var tr = $(elem).closest('tr'),
quantity = $('[name="invoice_product_qty[]"]', tr).val(),
price = $('[name="invoice_product_price[]"]', tr).val(),
isPercent = $('[name="invoice_product_discount[]"]', tr).val().indexOf('%') > -1,
percent = $.trim($('[name="invoice_product_discount[]"]', tr).val().replace('%', '')),
subtotal = parseInt(quantity) * parseFloat(price);
if(percent && $.isNumeric(percent) && percent !== 0) {
if(isPercent){
subtotal = subtotal - ((parseFloat(percent) / 100) * subtotal);
} else {
subtotal = subtotal - parseFloat(percent);
}
} else {
$('[name="invoice_product_discount[]"]', tr).val('');
}
$('.calculate-sub', tr).val(subtotal.toFixed(2));
}
function calculateTotal() {
var grandTotal = 0,
disc = 0,
c_ship = parseInt($('.calculate.shipping').val()) || 0;
$('#invoice_table tbody tr').each(function() {
var c_sbt = $('.calculate-sub', this).val(),
quantity = $('[name="invoice_product_qty[]"]', this).val(),
price = $('[name="invoice_product_price[]"]', this).val() || 0,
subtotal = parseInt(quantity) * parseFloat(price);
grandTotal += parseFloat(c_sbt);
disc += subtotal - parseFloat(c_sbt);
});
// VAT, DISCOUNT, SHIPPING, TOTAL, SUBTOTAL:
var subT = parseFloat(grandTotal),
finalTotal = parseFloat(grandTotal + c_ship),
vat = parseInt($('.invoice-vat').attr('data-vat-rate'));
$('.invoice-sub-total').text(subT.toFixed(2));
$('#invoice_subtotal').val(subT.toFixed(2));
$('.invoice-discount').text(disc.toFixed(2));
$('#invoice_discount').val(disc.toFixed(2));
if($('.invoice-vat').attr('data-enable-vat') === '1') {
if($('.invoice-vat').attr('data-vat-method') === '1') {
$('.invoice-vat').text(((vat / 100) * subT).toFixed(2));
$('#invoice_vat').val(((vat / 100) * subT).toFixed(2));
$('.invoice-total').text((finalTotal).toFixed(2));
$('#invoice_total').val((finalTotal).toFixed(2));
} else {
$('.invoice-vat').text(((vat / 100) * subT).toFixed(2));
$('#invoice_vat').val(((vat / 100) * subT).toFixed(2));
$('.invoice-total').text((finalTotal + ((vat / 100) * finalTotal)).toFixed(2));
$('#invoice_total').val((finalTotal + ((vat / 100) * finalTotal)).toFixed(2));
}
} else {
$('.invoice-total').text((finalTotal).toFixed(2));
$('#invoice_total').val((finalTotal).toFixed(2));
}
}

JSFIDDLE
The id problem is that it must be unique, this will not the solve problem but will prevent others, it an HTML rule (W3SCHOOLS Id description):
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
The input event should contain all the other events that you have listed alone, with some difference (input event answer):
Occurs when the text content of an element is changed through the user
interface.
This was another problem: e.preventDefault;, you missed the parenthesis:e.preventDefault();
The real problem was that updateTotals(); was sending the wrong element identifier, this is the correct one:updateTotals('.calculate');
$(document).on('click', ".item-select", function (e) {
e.preventDefault();
var product = $(this);
$('#insert').modal({backdrop: 'static',keyboard: false}).one('click', '#selected', function (e) {
var itemText = $('#insert').find("option:selected").text();
var itemValue = $('#insert').find("option:selected").val();
$(product).closest('tr').find('#invoice_product').val(itemText);
$(product).closest('tr').find('#invoice_product_price').val(itemValue);
updateTotals('.calculate');
calculateTotal();
});
return false;
});

How to set input value using javascript program

Okay, so here is what I got here. I am using this site, [http://freedoge.co.in/#][1] with my auto-rolling bot. The bot I am using at the moment starts at the lowest value possible since there is already a button on the site for it. But, I want my bot to start at .05.
This is the input value that my bot needs to change before every roll...
<input id="double_your_doge_stake" type="text" style="text-align:center;" value="0.00000001" name="stake"></input>
And here is my bot script... it runs in the browser when the user uses inspect element and plays the program.
bconfig = {
maxBet: 28000,
wait: 200,
toggleHilo: false
};
hilo = 'lo';
multiplier = 4;
rollDice = function () {
if ($('#double_your_doge_bet_lose') .html() !== '') {
$('#double_your_doge_2x') .click();
multiplier++;
if (bconfig.toggleHilo) toggleHiLo();
} else {
$('#double_your_doge_min') .click();
multiplier = 2;
}
if (parseFloat($('#balance') .html()) < (parseFloat($('#double_your_doge_stake') .val()) * 2) ||
parseFloat($('#double_your_doge_stake') .val()) > bconfig.maxBet) {
$('#double_your_doge_min') .click();
}
$('#double_your_doge_bet_' + hilo + '_button') .click();
setTimeout(rollDice, (multiplier * bconfig.wait) + Math.round(Math.random() * 100));
};
toggleHiLo = function () {
if (hilo === 'lo') {
hilo = 'lo';
} else {
hilo = 'lo';
}
};
rollDice();

Use val.
$('#double_your_doge_stake').val(value)

Change value of a float in a cell

I have an HTML table which contains a value as well as a checkbox every row.
When I click on the checkbox, it activates a script which adds this value in another fixed cell. If the checkbox is checked, it adds the number, if it is unchecked, it subtracts the number.
function val_sel_achat(val, id)
{
if (document.getElementById(id).checked)
{
document.getElementById('res_achat').innerHTML += val;
}
else
{
document.getElementById('res_achat').innerHTML -= val;
}
}
It's mostly working well, except that it seems to concatenate chains rather than add numbers.
So if I check a box with val = 100, then uncheck it, it displays 100, then 0, which is alright.
But if I check two different boxes, like 100 and 25, it displays 10025.
How would I change my code so it displays 125 instead?
Thanks.

function val_sel_achat(val, id)
{
var x = document.getElementById('res_achat').innerHTML;
if (document.getElementById(id).checked)
{
document.getElementById('res_achat').innerHTML = parseFloat(x) + val;
}
else
{
document.getElementById('res_achat').innerHTML = parseFloat(x) - val;
}
}

Use .parseFloat()
function val_sel_achat(val, id) {
var inner = document.getElementById('res_achat').innerHTML;
if (document.getElementById(id).checked) {
document.getElementById('res_achat').innerHTML = parseFloat(inner) + parseFloat(val);
} else {
document.getElementById('res_achat').innerHTML = parseFloat(inner) - parseFloat(val);
}
}
A sample working without checkbox fiddle