I want pickUpState + deliveryState + dropPointState + addManpower = total
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#makeReservationForm input').on('change',function(){
var totalManpower=$("[type='radio']:checked").val();
$('#totalManpower').val($("[type='radio']:checked").val());
})
});
jQuery(function($) {
var pickUp = {
'Wilayah Persekutuan': ['Kuala Lumpur', 'Putrajaya'],
'Selangor': ['Shah Alam', 'Klang']
}
var $pickUp = $('#pickUpState');
$('#pickUpCity').change(function () {
var pickUpCity = $(this).val(), pickUps = pickUp[pickUpCity] || [];
var html = $.map(pickUps, function(lcnPU){
return '<option value="' + lcnPU + '">' + lcnPU + '</option>'
}).join('');
$pickUp.html(html)
});
var delivery = {
'Wilayah Persekutuan': ['Kuala Lumpur', 'Putrajaya'],
'Selangor': ['Shah Alam', 'Klang'],
'Melaka': ['Alor Gajah', 'Jasin'],
'Negeri Sembilan': ['Shah Alam', 'Klang'],
'Johor': ['Muar', 'Batu Pahat', 'Johor Bahru'],
'Pahang': ['Kuantan', 'Klang', 'Bentong', 'Genting', 'Cameron Highland'],
'Pulau Pinang': ['Pulau Pinang', 'Butterworth'],
'Kelantan': ['Kota Bharu', 'Machang'],
'Terengganu': ['Kuala Terengganu'],
'Kedah': ['Alor Star', 'Sungai Petani'],
'Perlis': ['Arau', 'Kangar'],
'Perak': ['Ipoh', 'Tanjung Malim', 'Setiawan', 'Teluk Intan']
}
var $delivery = $('#deliveryState');
$('#deliveryCity').change(function () {
var deliveryCity = $(this).val(), $deliverys = delivery[deliveryCity] || [];
var html = $.map($deliverys, function(lcnD){
return '<option value="' + lcnD + '">' + lcnD + '</option>'
}).join('');
$delivery.html(html)
});
var dropPoint = {
'Wilayah Persekutuan': ['Kuala Lumpur', 'Putrajaya'],
'Selangor': ['Shah Alam', 'Klang'],
'Melaka': ['Alor Gajah', 'Jasin'],
'Negeri Sembilan': ['Shah Alam', 'Klang'],
'Johor': ['Muar', 'Batu Pahat', 'Johor Bahru'],
'Pahang': ['Kuantan', 'Klang', 'Bentong', 'Genting', 'Cameron Highland'],
'Pulau Pinang': ['Pulau Pinang', 'Butterworth'],
'Kelantan': ['Kota Bharu', 'Machang'],
'Terengganu': ['Kuala Terengganu'],
'Kedah': ['Alor Star', 'Sungai Petani'],
'Perlis': ['Arau', 'Kangar'],
'Perak': ['Ipoh', 'Tanjung Malim', 'Setiawan', 'Teluk Intan']
}
var $dropPoint = $('#dropPointState');
$('#dropPointCity').change(function () {
var dropPointCity = $(this).val(), $dropPoints = dropPoint[dropPointCity] || [];
var html = $.map($dropPoints, function(lcnDP){
return '<option value="' + lcnDP + '">' + lcnDP + '</option>'
}).join('');
$dropPoint.html(html)
});
});
</script>
<title>Make Reservation</title>
</head>
<body>
<h1>Make Reservation</h1>
<h2>PICK-UP</h2>
<label for="pickUpAddress">Pick-Up Address:</label><br>
<input type="text" id="pickUpAddress" name="pickUpAddress" required="required"><br><br>
<label for="pickUpPostalCode">Pick-Up Postal Code:</label><br>
<input type="text" id="pickUpPostalCode" name="pickUpPostalCode" required="required"><br><br>
<label class="page1">City</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
<select id="pickUpCity" name="pickUpCity" >
<option style="display:none;" selected></option>
<option>Wilayah Persekutuan</option>
<option>Selangor</option>
</select>
</div>
<br />
<label class="page1">State</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
<select id="pickUpState" name="pickUpState"></select>
</div>
<br /><br />
<h2>DELIVERY</h2>
<label for="deliveryAddress">Delivery Address:</label><br>
<input type="text" id="deliveryAddress" name="deliveryAddress" required="required"><br><br>
<label for="deliveryPostalCode">Delivery Postal Code:</label><br>
<input type="text" id="deliveryPostalCode" name="deliveryPostalCode" required="required"><br><br>
<label class="page1">City</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
<select id="deliveryCity" name="deliveryCity" onchange="calcVals()">
<option style="display:none;" selected></option>
<option value="200">Wilayah Persekutuan</option>
<option>Selangor</option>
<option>Melaka</option>
<option>Negeri Sembilan</option>
<option>Johor</option>
<option>Pahang</option>
<option>Pulau Pinang</option>
<option>Kelantan</option>
<option>Terengganu</option>
<option>Kedah</option>
<option>Perlis</option>
<option>Perak</option>
</select>
</div>
<br />
<label class="page1">State</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
<select id="deliveryState" name="deliveryState" ></select>
</div>
<br /><br />
<h2>DROP-POINT</h2>
<label for="label">*insert form below if required</label><br><br>
<label for="dropPointAddress">Drop-Point Address:</label><br>
<input type="text" id="dropPointAddress" name="dropPointAddress" ><br><br>
<label for="dropPointPostalCode">Drop-Point Postal Code:</label><br>
<input type="text" id="dropPointPostalCode" name="dropPointPostalCode"><br><br>
<label class="page1">City</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
<select id="dropPointCity" name="dropPointCity" onchange="calcVals()">
<option style="display:none;" selected></option>
<option value="200">Wilayah Persekutuan</option>
<option>Selangor</option>
<option>Melaka</option>
<option>Negeri Sembilan</option>
<option>Johor</option>
<option>Pahang</option>
<option>Pulau Pinang</option>
<option>Kelantan</option>
<option>Terengganu</option>
<option>Kedah</option>
<option>Perlis</option>
<option>Perak</option>
</select>
</div>
<br /><br />
<label class="page1">State</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
<select id="dropPointState" name="dropPointState" ></select>
</div>
<br /><br />
<label for="addManpower">Add Manpower:</label><br>
<input type="radio" id="addManpower" name="addManpower" value="80">
<label for="yes">YES</label>
<input type="radio" id="addManpower" name="addManpower" value="">
<label for="no">NO</label><br><br>
<label for="totalManpower">Total Manpower:</label><br>
<label for="totalMrm">RM</label>
<input type="text" id="totalManpower" name="totalManpower" class="checker" readonly><br><br><br>
<input type="submit" value="Submit"><br><br>
</form>
<form id="calculateTotalForm" name="calculateTotalForm" method="post" action="ReservationController">
<label for="total">TOTAL: RM</label>
<input type="text" id="total" name="total" readonly><br><br>
</form>
</body>
</html>
What I have tried:
function calcVals(){
var m = document.getElementById("addManpower");
var del = document.getElementById("deliveryCity");
var drop = document.getElementById("dropPointCity");
var selDel = del.options[del.selectedIndex].value;
var selDrop = drop.options[drop.selectedIndex].value;
var selM = m.options[m.selectedIndex].value;
var totalCal = +selDel + +selDrop + +selM;
document.getElementBYId("total").value = totalCal;
}