Adding Variables to URL using jQuery

Question

I'm a first timer on here, so I apologize for inadvertently breaking rules. I am trying to create a series of buttons that, if clicked, add certain values to a url. The idea is I want to find out which of 2 variables need to be passed when the person clicks the link at the end.

Here's my code:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(function(){
  var product1 = 'productId=1&productQuantity=1';
  var product2 = 'productId=2&productQuantity=1';
  var carturl = 'http://cart.net?clearCart=true';
  jQuery(function(){
    jQuery("#Product1Yes").click(function () {
      jQuery("#Product2").show("fast");
      jQuery("#Product1").hide("fast");
    });
    jQuery('a#upsell').attr('href', function() {
      return carturl + '&' + product1;
    });
    jQuery("#Product1No").click(function () {
      jQuery("#Product2").show("fast");
      jQuery("#Product1").hide("fast");
    });
    jQuery("#Product2Yes").click(function () {
      jQuery("#Product3").show("fast");
      jQuery("#Product2").hide("fast");
    });
    jQuery('a#upsell').attr('href', function() {
      return carturl + '&' + product2;
    });
    jQuery("#Product2No").click(function () {
      jQuery("#Link).show("fast");
      jQuery("#Product2").hide("fast");
    }); 
  });
});
</script>

<div id="Product1">
    <button class="btn btn-primary" id="Product1Yes">Yes</button>
    <button class="btn btn-danger" id="Product1No">No</button>
</div>

<div id="Product2">
    <button class="btn btn-primary" id="Product2Yes">Yes</button>
    <button class="btn btn-danger" id="Product2No">No</button>
</div>

<div id="Link">
    <a id='upsell' href='#'>Click here to check out</a>
</div>

I think I'm missing something dumb because my show/hide functions aren't working and I don't think the link is getting created right. Thoughts?

@Hogan - The return returns the value to the attr() method, setting the href. — adeneo
– adeneo, Commented May 26, 2013 at 16:07
Right now the code is binding clicks inside clicks etc. You should indent your code properly, and you'll notice errors like that right away. — adeneo
– adeneo, Commented May 26, 2013 at 16:09

dsgriffin · Accepted Answer · 2013-05-26 16:24:46Z

1

jsFiddle here.

<div id="Produc1"> should be <div id="Product1"> in your HTML.

Also, you were missing a few closing braces:

var product1 = 'productId=1&productQuantity=1';
var product2 = 'productId=2&productQuantity=1';
var carturl = 'http://cart.net?clearCart=true';
jQuery(function(){
  jQuery("#Product1Yes").click(function () {
    jQuery("#Product2").show("fast");
    jQuery("#Product1").hide("fast");
  });
  jQuery('a#upsell').attr('href', function() {
    return carturl + '&' + product1;
  });
  jQuery("#Product1No").click(function () {
    jQuery("#Product2").show("fast");
    jQuery("#Product1").hide("fast");
  });
  jQuery("#Product2Yes").click(function () {
    jQuery("#Link").show("fast");
    jQuery("#Product2").hide("fast");
  });
  jQuery('a#upsell').attr('href', function() {
    return carturl + '&' + product2;
  });
  jQuery("#Product2No").click(function () {
    jQuery("#Link").show("fast");
    jQuery("#Product2").hide("fast");
  });
});

edited May 26, 2013 at 16:24

answered May 26, 2013 at 16:05

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hogan Over a year ago

#Product3 is not defined

dsgriffin Over a year ago

@Hogan I was guessing he hasn't created that part in the HTML yet

bertlymartizzle Over a year ago

I've added that now, but it still doesn't seem to be working.

dsgriffin Over a year ago

@bertlymartizzle Where have you added it? I don't see it in your question? Obviously it won't work for Product3 as you haven't defined it or given me the code for it, but the other two parts work as shown in my jsFiddle!

bertlymartizzle Over a year ago

My bad. I'm still learning what I'm supposed to do on these. Thanks for your help

|

Collectives™ on Stack Overflow

Adding Variables to URL using jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related