CODEWITHSUNDEEP
javascriptjquery
Steve Price
Steve Price

Reputation: 600

Enhance existing jQuery function to hide div on increment

This is an extension of a question i asked earlier. Original is here Use existing javascript to trigger if else in php

I've created a fiddle to further explain/show how the existing jQuery functions.

what i need is for the div hide to trigger when the + buttons increase the value over 1, so somehow on event.

I tried to add the 

{ $('#foobar').hide(); }

in with the section where the qty is incremented, here

$cartAdd.click(function(evt) {
  var $incrementor = jQuery(evt.target)
    , quantity = parseInt($quantity.val(), 10);

but it didnt work for me.

Fiddle is here http://jsfiddle.net/Yyb8L/1/

Upvotes: 0

Views: 135

Answers (2)

HTTP
HTTP

Reputation: 1724

Base from what I understand on your question, you want to hide the div if the value of the textbox is above 1 or if the plus button was click.

I had created a simple code for you to have a basis to attain what you need.

This is the fiddle

$(document).ready(function () {
  $('#plus').on('click', function () {
    $('#qty').val(parseInt($('#qty').val()) + 1);
    $('#div-hide').hide();
  });

  $('#minus').on('click', function () {
    var qty = parseInt($('#qty').val()) - 1;
    $('#qty').val(qty);
    if (qty == 0) {
        $('#div-hide').show();
    }
 });

});

Hope that helps!

Upvotes: 1

Boomish
Boomish

Reputation: 38

If I understand you correctly, on the event that your #cartAdd input is clicked, you'd like to check to see if the value of iterator has increased to greater than 1, and then hide the #foobar div.

In order to do this, you would first need to update the value each time the 'inc' and 'dec' buttons are clicked.

if($incrementor.hasClass('inc')) {
    quantity += 1;
    $quantity.val(quantity);  //the value of $quantity is updated
} else if($incrementor.hasClass('dec')) {
    quantity += -1;
    $quantity.val(quantity); //the value of $quantity is updated
}

Second, you would need to wrap your if/then block in a function, which would be called on the event the input gets clicked. 

function checkIncrement(){    
    if( $('#cartAdd').find('input').val() > 1 ) 
    { $('#foobar').hide(); }
}

The function should be invoked only after the quantities have been updated, like so:

 $cartAdd.click(function(evt) {
  var $incrementor = jQuery(evt.target)
    , quantity = parseInt($quantity.val(), 10);

  if($incrementor.hasClass('inc')) {
    quantity += 1;
    $quantity.val(quantity); //the value of $quantity is updated
  } else if($incrementor.hasClass('dec')) {
    quantity += -1;
    $quantity.val(quantity); //the value of $quantity is updated
  }

  checkIncrement(); //checkIncrement is invoked after values are updated.

  if(quantity > 0) {
    $quantity.val(quantity);
    xhr.getPrice();
  }


    jQuery(".back").change(function(){
    xhr.getPrice();
    });
});

Here is a fiddle of the solution http://jsfiddle.net/boomish/V7Hnw/1/

Hope this helps!

Edit to include correct link to fiddle

Upvotes: 1

Related Questions