How to show/hide buttons in questionnaire

Question

I'm trying to get the buttons to dropdown with an if else show/hide /statement/function but I can't seem to get it to work. I've tried jquery and javascript but it doesn't seem to work. I'm willing to use javascript and jquery to accomplish this.

Here are some examples I'm trying to accomplish (Note: this was done on purpose for example reasons only and I am very aware that this is not a valid code):

        if (q1 == "iphone3gs") {
            $('.show(iphone3gs)').val('.hide(iphone4 iphone4s iphone5 
iphone5s)').click(function () {
                window.location.href = 'iphone3gs'
            });

        if (q1 == "iphone4") {
            $('.show(iphone4)').val('.hide(iphone3gs iphone4s iphone5 
iphone5s)').click(function () {
                window.location.href = 'iphone3gs'
            });

        if (q1 == "iphone4S") {
            $('.show(iphone4s)').val('.hide(iphone3gs iphone4 iphone5 
iphone5s)').click(function () {
                window.location.href = 'iphone3gs'
            });

        if (q1 == "iphone5") {
            $('.show(iphone5)').val('.hide(iphone3gs iphone4s iphone4 
iphone5s)').click(function () {
                window.location.href = 'iphone3gs'
            });

        if (q1 == "iphone5s") {
            $('.show(iphone5s)').val('.hide(iphone3gs iphone4s iphone5 
iphone4)').click(function () {
                window.location.href = 'iphone3gs'
            });

Here's the full code in jsfiddle: http://jsfiddle.net/wLY7C/3/

Code without any editing: http://jsfiddle.net/nwxLM/

Answer 1

Your code is all messed up! Please use variable and id names that are easily understandable.

Here is a demo . Just select any answer for each question and see what happens. The button text is q1 q2 q3 q4 in that order.

You are using q4 to check for color when it is actually phone type and so no. I changed just enough to make you understand your problem.

$('#next_button').val("" + q1 + " " + q2 + " " + q3 + " " + q4); return;

//now check the values to display a different link for the desired  configuration
if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "iPhone-3GS") {
     $('#next_button').val('att 8gb black').click(function () {
          window.location.href = 'http://google.com/'
      });
} 

To show an hidden element use $(selector).show() and to hide an element use $(selector).hide() . Do not confuse with the IDs with the class name and the value you have provided to the elements.