Having issue trying to sum list/menu selected values to show on a textbox
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
</head>
<body>
<p><input name="wal" id="wal" type="text"></p>
<p><input type="text" id="total" value="0"></p>
<select size="7" multiple="multiple" id="multiple">
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
<script>
function displayVals() {
var multipleValues = $("#multiple").val() || [];
$("#wal").val(
multipleValues.join("+ "));
var total =($('#wal').val());
// Update the total
var postid=total.split("+");
var sum = 0;
//iterate through each textboxes and add the values
$("#wal").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#total").html(sum.toFixed(2));
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>
Can anyone help with this please