CODEWITHSUNDEEP
javascriptjqueryhtml
APSB
APSB

Reputation: 587

JavaScript Show Hidden Button

In there I want to make my button is can show and hide when I click button - Hidden : when I click button minus - show : when I click button plus

$('.btn-plus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty + 1;
  var new_price = price * new_qty;
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price.number_format(0));
})
$('.btn-minus').click(function() {
      var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
      var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
      var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
      var new_qty = qty - 1;
      if (new_qty < 1) {
        return
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width: 150px;">
  <span class="input-group-btn">
                  <button type="button" class="btn btn-danger btn-number btn-minus"  data-type="minus">
                    <span class="glyphicon glyphicon-minus"></span>
  </button>
  </span>
  <input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
  <span class="input-group-btn">
                  <button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
                      <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</div>

and this what I want to make show hide 

<input type='submit' class='btn btn-lg btn-success button-float' value="Book Now">

Upvotes: 1

Views: 93

Answers (3)

Govind Samrow
Govind Samrow

Reputation: 10179

Here is your full solution:

$('.btn-plus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty + 1;
  var new_price = price * new_qty;
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price);
  $(".btn-submit").show();
});

$('.btn-minus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty - 1;
  var new_price = price * new_qty;
  if (new_qty < 1) {
    new_qty = 0;
    new_price = 0;
    $(".btn-submit").hide(); //Or wherever else you want it.
  }
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<div class="input-group" style="width: 150px;">
  <span class="input-group-btn">
              <button type="button" class="btn btn-danger btn-number btn-minus"  data-type="minus">
                <span class="glyphicon glyphicon-minus"></span>
  </button>
  </span>
  <input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
  <span class="input-group-btn">
              <button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
                  <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</div>

<input type='submit' class='btn btn-lg btn-success button-float btn-submit' value="Book Now">

Upvotes: 0

Arnav Borborah
Arnav Borborah

Reputation: 11789

$(element).hide() sets display to none

$(element).show() sets display to original value

Accordingly, change your code to the following:

var sumbit = $(":submit");
$('.btn-plus').click(function() {
    $(submit).show(); //Or wherever else you want it.
    var qty = parseInt($(this).parents('.input-group').find('.input-number').val());    
    var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));    
    var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));    
    var new_qty = qty + 1;
    var new_price = price * new_qty;    
    $(this).parents('.input-group').find('.input-number').val(new_qty);
    $("#price"+id).text("Rp. "+new_price.number_format(0);
});
$('.btn-minus').click(function() {
    $(submit).hide(); //Or wherever else you want it.
    var qty = parseInt($(this).parents('.input-group').find('.input-number').val());   
    var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));    
    var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));    
    var new_qty = qty - 1;
    if(new_qty < 1){
      return;
});

Upvotes: 0

spencer.sm
spencer.sm

Reputation: 20574

Add $(":submit").show(); to the function called by the plus button.

Add $(":submit").hide(); to the function called by the minus button.

Upvotes: 1

Related Questions