Looking for a better solution

Question

I have a variation of products that can be purchased in different colors based on the Purchasers desire.

My first dropdown is if they buy 1 product which is easy wont waste your time.

The second is purchasing 2 products. Dropdown 1 has black / white / red / blue Dropdown 2 has black / white / red / blue

The second tier is purchasing 3 products

Dropdown 1 has black / white / red / blue Dropdown 2 has black / white / red / blue Dropdown 3 has black / white / red / blue

Each variation has a different link so for example there are on the 3 products, 48 ways to purchase Black. BK / BK / Bk and so on.

What I am trying to do, is create a code that takes black white red or blue, and creates a link regardless of the color.

Here is a link based on a color Black / Black / Black = http://get.pressybutton.com/cart/653746441:1 Unfortunatly the link characteristics are not based on the color options (or this would be far easier). What I want to be able to do is create a method that regardless of white black red, or red black white, or black red white, that is chosen, the link will always be black red white.

Pretty extensive right. Here is the code I have created. HTML

   <form id="dropdown" name="dropdown">
        <select accesskey="E" class="style stylethree combine3" id="target"
        name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <select accesskey="E" class="style stylefour combine4" id=
        "target" name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <select accesskey="E" class="style stylefive combine5" id=
        "target" name="selected">
            <option value="black">
                Black
            </option>

            <option value="blue">
                Blue
            </option>

            <option value="red">
                Red
            </option>

            <option value="white">
                White
            </option>
        </select> <input class="select_pre_1" type="button" value=
        "Get (3) Pressy’s!">
    </form>

Jquery

var solidLink = "http://get.pressybutton.com/cart/";
var col_1a;
var col_2a;

var col_1b;
var col_2b;
var col_3b; 
$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black" && col_3b == "black"){

        window.location.href = solidLink+"653746441:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "red"){
        window.location.href = solidLink+"653746445:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "white"){
        window.location.href = solidLink+"653746449:1"
    }   
    if(col_1b == "black" && col_2b == "black" && col_3b == "blue"){

        window.location.href = solidLink+"653746497:1"
    }
});

Final thought.

What I want to do, is create a var that combines the three chosen variables, then computes them, regardless of the formation it should spit grab the proper link. Here is my example.

var solidLink = "http://get.pressybutton.com/cart/";
var col_1a;
var col_2a;

var col_1b;
var col_2b;
var col_3b;
var combine_3 = col_1b+","+col_2b+","+col_3b; 
$('.select_pre_1').click(function(){
    if(combine_3 == "black"){
       window.location.href = solidLink+"653746441:1"
    }
    if(combine_3 == "black, white, black")/*** The variation shouldnt matter ***/{
       window.location.href = solidLink+"653746449:1"
    }
});

I think the method above would work. So regardless of the color, it would just check to see if it has all three of those var. Lastly I know this can be done with json... (which I am not the best with). THank you!!! I hope I spelled this out for everyone.

Malachi Malachi · Accepted Answer · 2014-05-30T17:59:37

instead of this

$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black" && col_3b == "black"){

        window.location.href = solidLink+"653746441:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "red"){
        window.location.href = solidLink+"653746445:1"
    }
    if(col_1b == "black" && col_2b == "black" && col_3b == "white"){
        window.location.href = solidLink+"653746449:1"
    }   
    if(col_1b == "black" && col_2b == "black" && col_3b == "blue"){

        window.location.href = solidLink+"653746497:1"
    }
});

you should nest your if statements to make it cleaner and more to the point, if col_1b and col_2b aren't black it doesn't matter what col_3b is

$('.select_pre_1').click(function(){
    /*** BLACK BLACK ---- COLOR ***/
    if(col_1b == "black" && col_2b == "black"){
        if (col_3b == "black"){
        window.location.href = solidLink+"653746441:1";
        } else if col_3b == "red"){
            window.location.href = solidLink+"653746445:1";
        } else if col_3b == "white"){
        window.location.href = solidLink+"653746449:1";
        } else if col_3b == "blue"){
        window.location.href = solidLink+"653746497:1";
        }
    }
});

and you were missing semi-colons as well.

Writing your code like this is nested another level but it is clear and to the point.

Another way to do this is to use a Case Statement instead of an if block on the inside.

Looking for a better solution

1 Answers