Question

I am trying to make work my price estimator using jQuery and some basic javascript functions.

What I want to do is to change to value of my total variable, depending on the choices made in the dropdown menus. My prices aren’t made from a unit price, so I need to set a price for a set of options. You’ll understand by seeing my JS code (what I tried that is not working)

Here’s my fiddle.

And here’s my JS code :

var total=0;
$('#total span').text(total);


if  (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "Front Only" && document.getElementById("quantitySelect").value == "500" && document.getElementById("turnaroundSelect").value == "4 days")
{
total=150; 
}

Here’s my HTML code :

   <form id="calculator">

    <center>
      <label class="titleLabels">Business cards</label></center>

     <label class="formLabels">Dimensions :</label>
    <select id="sizeSelect" class="formSelects">
      <option value="3.5x2">3.5&quot; x 2&quot;</option>
      <option value="3.5x1.25">3.5&quot; x 1.25&quot;</option>
    </select>

    <label class="formLabels">Paper :</label>
    <select id="paperSelect" class="formSelects">
        <option value="14 PT 1" selected="selected">14 PT Cardstock Gloss</option>
        <option value="14 PT 2">14 PT Cardstock Matte</option>
    </select>

    <label class="formLabels">Printed :</label>
    <select id="printedSelect" class="formSelects">
        <option value="Front Only" selected="selected">Front Only</option>
        <option value="Front and Back">Front and Back</option>
    </select>

    <label class="formLabels">Quantity :</label>
    <select id="quantitySelect" class="formSelects">
            <option value="250">250</option>
            <option value="500" selected="selected">500</option>
    </select>

    <label class="formLabels">Production :</label>
    <select id="turnaroundSelect" class="formSelects">
        <option value="5 days" selected="selected">5 days</option>
        <option value="4 days">4 days</option>
    </select>

    <div id="totalBox">
        <label class="formLabels" id="total"> Total : $<span></span></label>
    </div>


<!-- hidden values -->    
    <input type="hidden" id="sizeSelect_value" value="50" name="formValues" />
    <input type="hidden" id="paperSelect_value" value="20" name="formValues" />
    <input type="hidden" id="printedSelect_value" value="0" name="formValues" />
    <input type="hidden" id="quantitySelect_value" value="25" name="formValues" />
    <input type="hidden" id="turnaroundSelect_value" value="5" name="formValues" />

    </form>​
​

Answer 1

Here’s a working fiddle: http://jsfiddle.net/manishie/72Jbe/3/

Here’s the revised Javascript:

var total=0;
$('#total span').text(total);

$('form').on('change', 'select', function() { 
    if  (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "0" && document.getElementById("quantitySelect").value == "30" && document.getElementById("turnaroundSelect").value == "15")
{
    total=150; 
    $('#total span').text(total);
}

});

First problem is that you were matching agains the text descriptions, not against the values for the second, third and fourth parts of the if statement.

Second problem was that you need to attach this to the change event for the select tags.

Third problem is that you weren’t saving the new total after it changed.

Run the fiddle, and change the bottom value to 4 days and it will work.​