Simon Turner Simon Turner - 4 months ago 26
PHP Question

JS table value update onchange

I would like to update the values in a table immediately below a form that i have. Quantities in the cart are increased and decreased and the value in the table below is to match.At the moment the increase/decrease works for the input field for the form but I cant get any change on the table field.

JS for Form field-

/* Input incrementer*/
$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function () {

var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});


HTML -

<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Adults</label>
<div class="numbers-row">
<input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control" name="quantity">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Children</label>
<div class="numbers-row">
<input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
</div>
</div>
</div>
</div>
<br>
<table class="table table_summary">
<tbody>
<tr>
<td>
Adults
</td>
<script>
function myFunction() {
var x = document.getElementById("adult").value;
document.getElementById("adultvalue").innerHTML = "&pound;" + x;
}
</script>
<td class="text-right">
<p id="adultvalue">2</p>
</td>
</tr>
<tr>
<td>
Children
</td>
<td class="text-right">
0
</td>
</tr>
<tr>
<td>
Total amount
</td>
<td class="text-right">
3x £52
</td>
</tr>
<tr class="total">
<td>
Total cost
</td>
<td class="text-right">
£154
</td>
</tr>

Answer

Please check below snippet. I have tried to cover all your solutions. For child I have set 26 pounds and for adult 52 pound in the demo. You can change it as per your need. If you found any query please let me know.

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');

//Here for example took £52 for adult and £26 for child. you can change as per your need.
$(".button_inc").on("click", function () {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
	if(oldValue==''){oldValue = 0;}
    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }
    $button.parent().find("input").val(newVal);
    //This line under
    $('#adultvalue').html('&pound;' + newVal);
	updatePerson();
});
function updatePerson() {	
	var adultQuant = $("#adult").val();
	if(adultQuant==""){adultQuant=0;}
	var childQuant = $("#child").val();
	if(childQuant==""){childQuant=0;}
	
	$("#adultvalue").html(adultQuant);
	$("#childvalue").html(childQuant);
	$("#adultcalc").html(adultQuant);
	$("#childcalc").html(childQuant);
	var totalCost = (adultQuant*52) + (childQuant*26);
	$("#totalcost").html(totalCost);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Adults</label>
			<div class="numbers-row">
				<input type="text" id="adult" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Children</label>
			<div class="numbers-row">
				<input type="text" id="child" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
</div>
<br>
<table class="table table_summary">
	<tbody>
	<tr>
		<td>
			Adults
		</td>
		<td class="text-right">
			<p id="adultvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Children
		</td>
		<td class="text-right">
			<p id="childvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Total amount
		</td>
		<td class="text-right">
			<p>Adults : <span id="adultcalc">0</span> x £52</p>
			<p>Child : <span id="childcalc">0</span> x £26</p>
		</td>
	</tr>
	<tr class="total">
		<td>
			Total cost
		</td>
		<td class="text-right">
			£<p id="totalcost">0</p>
		</td>
	</tr>
</table>