Real Time Update Based on user selection issue

I am trying to create a dynamic price field based on user selections. Unfortunately I am not sure why my code is not working. Nothing is displaying when I select the fields

This is the content of my javascript file. Basically I have three functions two of them are taking input based on dropdown selection and the last one is checking if a checkbox is checked and adding the value to the total.

I've checked all the ID's and was not able to find mistakes. Here is my html form with the three fields I am trying to grab data.

var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["Regular Domestic Cleaning"] = 12;

var filling_durations = new Array();
filling_durations["None"] = 0;
filling_durations["8 hours"] = 8;

//custom calculations
function getServiceType() {
  var servicePrice = 0;
  var bookingForm = document.forms["submit-property-form"];
  var selectedFilling = bookingForm.elements["type"];
  servicePrice = filling_prices[selectedFilling.value];
  return servicePrice;
}

function getServiceDuration() {
  var servicePriceDuration = 0;
  var bookingForm = document.forms["submit-property-form"];
  var selectedFilling = bookingForm.elements["location"];
  servicePriceDuration = filling_durations[selectedFilling.value];
  return servicePriceDuration;
}

function getDetergentsPrice() {
  var featuresPrice = 0;
  var theForm = document.forms["submit-property-form"];
  var addDetergents = theForm.elements["feature-"];
  if (addDetergents.checked == true) {
    detergentsPrice = 6;
  }
  return detergentsPrice;
}

function getTotal() {
  var bookingTotalPrice = (getServiceType() * getServiceDuration()) + getDetergentsPrice();


  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price " + bookingTotalPrice;

}
<form id="submit-property-form" class="submission_form" enctype="multipart/form-data" method="post" novalidate="novalidate">
  <div class="book_form">

    <div class="fh_services">
      <label for="type">Service</label>
      <span class="selectwrap">
	        <select name="type" id="type" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
				<option selected="selected" value="-1">Select Service Type</option>
		        <option value="89"> Ironing</option>
				<option value="88"> One Off Cleaning</option>
				<option value="90"> Regular Domestic Cleaning</option>
		    </select>			
            </div>

            <div class="fh2_duration">
	         <label for="location">How many hours do you need us for?</label>
	         <span class="selectwrap">
	         <select name="location" id="location" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
		     <option value="any" selected="selected">Duration</option>
		     <option value="two-hours">2 hours</option>
	         </span>
    </div>

    <div class="fh1_features">
      <label>Features</label>
      <label for="feature-1"><span class="ch_title">Add Detergents (+£6)</span>
	         <input type="checkbox" name="features[]" id="feature-1" value="57">
             <span class="rh_indicator"></span>
	         </label>
    </div>

    <div id="totalPrice"></div>
  </div>
</form>

1 answer

  • answered 2018-02-13 00:24 JasonB

    There are a good number of issues with the code you provided but here is a functioning version. Check out the following list of issues and let us know what wasn't clear. This might help make the question more useful for others.

    • You have an unclosed span tag
    • You have an unclosed select tag
    • Your fillingPrices array has 2 indexes but the select used to select it has 4 elements.
    • The value you get from accessing .value on a select in js is the value attribute of the option so your keys are off. The option with value "90" was supposed to find "Regular Domestic Cleaning" in the array - they are definitely not equal.
    • fillingDurations has the same mismatch - the keys of the array do not match the values in the select options. And here you have "two-hours" as the index where as the first select had the numbers 88 89 and 90 which will be hard to debug without context.
    • You declare featuresPrice but then try setting detergentsPrice in the getDetergentsPrice function.
    • There was nothing triggering the calculation of the total so I added a button.

    There are some little cleanup things you could do as well:

    • set bookingForm once outside of the price calculation functions
    • access the pricing calculations and store them separately in the getTotal function before you do the math. This makes troubleshooting a lot easier because you can easily print the component values to the log right before you use them

    var filling_prices= new Array();
        filling_prices[-1]=0;
        filling_prices[88]=10;
        filling_prices[89]=11;
        filling_prices[90]=12;
        
    
    var filling_durations = new Array();
        filling_durations[-1]=0;
        filling_durations['two-hours']=8;
    
    //custom calculations
    function getServiceType() {
        var servicePrice = 0;
        var bookingForm = document.forms["submit-property-form"];
        var selectedFilling = bookingForm.elements["type"];
        servicePrice = filling_prices[selectedFilling.value];
        return servicePrice;
    }
    
    function getServiceDuration() {
        var servicePriceDuration = 0;
        var bookingForm = document.forms["submit-property-form"];
        var selectedFilling = bookingForm.elements["location"];
        servicePriceDuration = filling_durations[selectedFilling.value];
        return servicePriceDuration;
    }
    function getDetergentsPrice() {
    var featuresPrice=0;
    var theForm = document.forms["submit-property-form"];
    var addDetergents = theForm.elements["features[]"];
    if(addDetergents.checked==true)
    {
        featuresPrice=6;
    }
    return featuresPrice;
    }
    
    function getTotal()
    {
        var bookingTotalPrice = (getServiceType() * getServiceDuration()) + getDetergentsPrice();
    
    
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='block';
        divobj.innerHTML = "Total Price "+bookingTotalPrice;
    
    }
     <form id="submit-property-form" class="submission_form" enctype="multipart/form-data" method="post" novalidate="novalidate">
           <div class="book_form">
    
            <div class="fh_services">
            <label for="type">Service</label>
            <span class="selectwrap">
            <select name="type" id="type" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                <option selected="selected" value="-1">Select Service Type</option>
                <option value="89"> Ironing</option>
                <option value="88"> One Off Cleaning</option>
                <option value="90"> Regular Domestic Cleaning</option>
            </select> 
            </span>
            </div>
    
            <div class="fh2_duration">
             <label for="location">How many hours do you need us for?</label>
             <span class="selectwrap">
             <select name="location" id="location" class="rh_select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true">
             <option value="any" selected="selected">Duration</option>
             <option value="two-hours">2 hours</option>
             </select>
             </span>
            </div>
    
            <div class="fh1_features">
             <label>Features</label>
             <label for="feature-1"><span class="ch_title">Add Detergents (+£6)</span>
             <input type="checkbox" name="features[]" id="feature-1" value="57">
             <span class="rh_indicator"></span>
             </label>
            </div>
    
            <div id="totalPrice"></div>
           </div>
    </form>
    
    <a href="#" onclick="getTotal()" >total</a>