if else statement and JQuery

Question

I'm trying to shorten my code using if else instead of just a whole bunch of if statements like I normally do, however I made a mistake somewhere and don't understand what I'm doing wrong. Ideally this snippet of code should have the "postQuantity" field have the values of "Select Fence Height", "Select Fence Style", "Select Picket Size", and then the result of the inputs after they are put through a JQuery equation. If anyone can point out what I'm doing wrong it would be greatly appreciated! Thank you! Here is a JSFiddle - http://jsfiddle.net/gv0029/8PR9C/ and here is the code:

HTML:

<form>
<fieldset id="fence">
    <div name="inputFence" class="inputFence">
        <legend><strong>Fence Description</strong>
        </legend>
        <label>Footage:
            <input name="footage_1" class="footage" />
        </label>
        <select name="fenceHeight_1" class="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
            <option value="8" id="fH8">8 Ft.</option>
        </select>
        <select name="fenceStyle_1" class="fenceStyle">
            <option value="select">Style</option>
            <option value="bnb" id="bnb">Board on Board</option>
            <option value="sbs" id="sbs">Side By Side</option>
        </select>
        <select name="picketSize_1" class="picketSize">
            <option value="select">Picket Size</option>
            <option value="1x3.5x6" id="1x4">1 x 3.5 x 6</option>
            <option value="1x4x6" id="1x4">1 x 4 x 6</option>
            <option value="1x5x6" id="1x4">1 x 5 x 6</option>
            <option value="1x5.5x6" id="1x4">1 x 5.5 x 6</option>
            <option value="1x6x6" id="1x4">1 x 6 x 6</option>
        </select>
        <legend><strong>Post Type</strong>
        </legend>
        <label>Picket Quantity
            <input name="picketQuantity_1" class="picketQuantity" />
        </label>
    </div>
</fieldset>

</form>

JS:

//Quantity for Pickets          
$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"], [class^="picketSize"],[class^="fenceStyle"], [class^="picketQuantity"]', function() {

            var parts = $(this).attr('name').split("_");
                fenceNumber = parts[1],

                footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10),
                fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val(),
                fenceStyle = $(":input[name='fenceStyle" + fenceNumber + "'" + ']').find('option:selected').val(),
                picketSize = $(":input[name='picketSize" + fenceNumber + "'" + ']').find('option:selected').val(),              
                picketQuantity = $(":input[name='picketQuantity_" + fenceNumber + "'" + ']'),
                total = '';

        if (!isNaN(Number(fenceHeight))) {  
            if (fenceStyle == 'sbs') {
                 if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") {
                    total = (((Math.ceil((footage * 12) / 3.5)) * 1.05));
                 } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") {
                    total = (((Math.ceil((footage * 12) / 5.5)) * 1.05));
                 } else {
                    total = "Select Picket Size";
                 }
                    picketQuantity.val(total);
            } else if (fenceStyle == 'bnb') {
                 if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") {
                    total = (((Math.ceil((footage * 12) / 8.5)) * 3) * 1.05);
                 } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") {
                    total = (((Math.ceil((footage * 12) / 10.5)) * 3) * 1.05);
                 } else {
                    total = "Select Picket Size";
                 }
                    picketQuantity.val(total);
            } else {
                picketQuantity.val("Select Fence Style");
            }   
        } else {
            picketQuantity.val("Select Fence Height");
        }

}); 

Answer 1

It looks like you just missed adding the "_" to a few of your attribute queries...

//Quantity for Pickets          
$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"], [class^="picketSize"],[class^="fenceStyle"], [class^="picketQuantity"]', function() {

            var parts = $(this).attr('name').split("_");
                fenceNumber = parts[1],

                footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10),
                fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val(),
                fenceStyle = $(":input[name='fenceStyle_" + fenceNumber + "'" + ']').find('option:selected').val(),
                picketSize = $(":input[name='picketSize_" + fenceNumber + "'" + ']').find('option:selected').val(),              
                picketQuantity = $(":input[name='picketQuantity_" + fenceNumber + "'" + ']'),
                total = '';

        if (!isNaN(Number(fenceHeight))) {  
            if (fenceStyle == 'sbs') {
                 if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") {
                    total = (((Math.ceil((footage * 12) / 3.5)) * 1.05));
                 } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") {
                    total = (((Math.ceil((footage * 12) / 5.5)) * 1.05));
                 } else {
                    total = "Select Picket Size";
                 }
                    picketQuantity.val(total);
            } else if (fenceStyle == 'bnb') {
                 if (picketSize == '1x3.5x6' || picketSize == "1x4x6" || picketSize == "1x5x6") {
                    total = (((Math.ceil((footage * 12) / 8.5)) * 3) * 1.05);
                 } else if (picketSize == '1x5.5x6' || picketSize == "1x6x6") {
                    total = (((Math.ceil((footage * 12) / 10.5)) * 3) * 1.05);
                 } else {
                    total = "Select Picket Size";
                 }
                    picketQuantity.val(total);
            } else {
                picketQuantity.val("Select Fence Style");
            }   
        } else {
            picketQuantity.val("Select Fence Height");
        }

}); 

Answer 2

There are many ways you can do this. Maybe try something like this-

fenceCalculations = {
    "sbs": function(args)
    {
        // do stuff
        // return size
    },
    "bnb": function(args)
    {
        // do stuff
        // return size
    }
}

var size = fenceCalculations[fenceStyle](args);