Generating a price from a HTML select form using a Javascript function

StackOverflow https://stackoverflow.com/questions/19182382

Question

I'm building a quote generator for a website, the form uses three dropdown boxes. I'm just starting to get my head around JS so I need some help passing the selected data from the HTML to the JS and returning a quote. I've created a function which takes three arguments(service, bedrooms, furnishing) which you can see here: http://jsfiddle.net/alan1986/g3bKV/ I'm sure there's a neater way I could write this function which would take far less code.

Anyway that's the least of my worries, this function might be far too big but at least it works. I've been researching answers for how to combine selected options from a form and pass them to a function and I can see how it would work using integers but I need to use strings. So here's some code I've been working with for getting the selected option from the HTML and then returning the result to the page - my question is how do I link this info to the function to return the result?

function output(){
    document.write(document.getElementById("service").value + "</br>");
    document.write(document.getElementById("bedrooms").value + "</br>");
    document.write(document.getElementById("furnishing").value + "</br>");

    var results = document.getElementById("service").value + "<br>" +
                  document.getElementById("bedrooms").value + "<br>" +
                  document.getElementById("furnishing").value + "<br>";

    document.getElementById("yourOutputDiv").innerHTML = results;
Was it helpful?

Solution

I wrote a singleton that attaches an onchange event to each form element and updates the this.data values on change. From looking at your code and your jsfiddle (which didn't work for me) this approach may not make a lot of sense. I've tested this on my local machine and it works

<script>
    var quoteMaker = {
        data : {
            'services':null,
            'bedrooms':null,
            'furnishing':null,
            'quoteString':''
        },
        servicesListener : function(){
           this.data.services = document.getElementById('service').options[document.getElementById('service').selectedIndex].text;
        },
        bedroomsListener : function(){
           this.data.bedrooms = document.getElementById('bedrooms').options[document.getElementById('bedrooms').selectedIndex].text;
        },
        furnishingListener : function(){
           this.data.furnishing = document.getElementById('furnishing').options[document.getElementById('furnishing').selectedIndex].text;
        },
        changeData : function(divObj){
            this.data.quoteString='';
            if( divObj.id == 'service' ){
                this.servicesListener();
            }else if( divObj.id == 'bedrooms' ){
                this.bedroomsListener();
            }else if( divObj.id == 'furnishing' ){
                this.furnishingListener();
            }
            this.updateQuote();
        },
    updateQuote : function() {
      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£85";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£90";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£100";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£85";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£80";


      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£50"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£40"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£35"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£40";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";


      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£55"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£80";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£45"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£70";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£40"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£65";
    document.getElementById("quote").innerHTML=this.data.quoteString;
},
        init: function(){

        }   
    }
    quoteMaker.init();
</script>


    <div id="form">
    <p class="lead">Complete the form for an instant quote</p>
        <form name="quote-maker" action="">
            <p>Select service<br />
            <select id="service" name="services" onchange="quoteMaker.changeData(this);">
                <option value="Inventory">Inventory</option>
                <option value="Check-In">Check-In</option>
                <option value="Check-Out">Check-Out</option>
            </select></p>        
            <p class="lead">How many bedrooms does the property have?<br />
            <select id="bedrooms" name="bedrooms" onchange="quoteMaker.changeData(this);">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="5">6+</option>
            </select></p> 
            <p class="lead">Is the property furnished or unfurnished?<br />
            <select id="furnishing" name="furnishing" onchange="quoteMaker.changeData(this);">
                <option value="1">Furnished</option>
                <option value="2">Part Furnished </option>
                <option value="3">Unfurnished (except for white goods)</option>
            </select></p>
        </form>
    </div>
    <div id="quote"></div>

Note: I cleaned up your html. Wrap all your <select> inputs in a single form

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top