inaz inaz - 1 year ago 53
HTML Question

How to limit the maximum of count

I wrote the below code for a booking flight and it works good.
my only problem is i can not set a limitation to my counter.
how can i limit a maximum of 4 such “Child X” select fields?
o want to set a limitation to add just to 4 .
how can i do this ?
here is my snippet :



$(function() {
var createChildDropdown = function(i) {
var $childDropdown = $('<div />', {
'class': 'childs'
});
$childDropdown.append($('<label />', {
'for': 'childDropdown-' + i
}).text('Child ' + i));
$childDropdown.append($('<select />', {
'id': 'childDropdown-' + i
}));
var options = ['a', 'b', 'c'];
options.forEach(function(option, index) {
$childDropdown.find('select').append($('<option />')
.text(option).attr('value', index));
});
return $childDropdown;
};
var destroyChildDropdown = function($el, i) {
$el.find('div.childs').get(i).remove();
};

$(".button-click a").on("click", function() {
var button = $(this);
var oldVal = parseInt(button.closest("ul").prev().val());
var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
var total_value = "";

button.closest("ul").prev().val(newVal);

$(".travel").each(function() {
var cat = $(this).prev('span').text();
total_value += cat + ": " + $(this).val() + ", ";
});

if (oldVal < newVal) {
$('.childDropdowns').append(createChildDropdown(newVal));
} else if (oldVal > newVal) {
destroyChildDropdown($('.childDropdowns'), newVal);
}

total_value = total_value.substring(0, total_value.length - 2);
$(".main").val(total_value);
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
<span>Children</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<div class="childDropdowns"></div>




Answer Source

You could just add a if(newVal >= 5) return; in your $(".button-click a") click handler. That would prevent further processing whenever the child count is going to be 5 or more.

$(function() {
  var createChildDropdown = function(i) {
    var $childDropdown = $('<div />', {
      'class': 'childs'
    });
    $childDropdown.append($('<label />', {
      'for': 'childDropdown-' + i
    }).text('Child ' + i));
    $childDropdown.append($('<select />', {
      'id': 'childDropdown-' + i
    }));
        var options = ['a', 'b', 'c'];
    options.forEach(function(option, index) {
      $childDropdown.find('select').append($('<option />')
             .text(option).attr('value', index));
    });
        return $childDropdown;
  };
    var destroyChildDropdown = function($el, i) {
    $el.find('div.childs').get(i).remove();
  };

  $(".button-click a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
    var total_value = "";
    
    if(newVal >= 5) return; 

    button.closest("ul").prev().val(newVal);

    $(".travel").each(function() {
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + ", ";
    });

    if (oldVal < newVal) {
      $('.childDropdowns').append(createChildDropdown(newVal));
    } else if (oldVal > newVal) {
      destroyChildDropdown($('.childDropdowns'), newVal);
    }

    total_value = total_value.substring(0, total_value.length - 2);
    $(".main").val(total_value);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
   <span>Children</span>
   <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />
   <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
   </ul>
</label>
<div class="childDropdowns"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download