CODEWITHSUNDEEP
jqueryurl
bertlymartizzle
bertlymartizzle

Reputation: 43

Adding Variables to URL using jQuery

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?

Upvotes: 3

Views: 392

Answers (1)

dsgriffin
dsgriffin

Reputation: 68626

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");
  });
});

Upvotes: 1

Related Questions