Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Make icons act like add/minus for qtys

<div style="margin-right: 10px;margin-top: -15px">
<input type="hidden" name="meal_id[]" value="<?php echo $meal_options_id2?>">
<i id="qty-minus<?=$meal_options_id2 ?>" class="fa fa-minus-circle controls" style="color: #d7d6d0;margin-right:10px"></i>
<input name="qty[]" id="qty<?=$meal_options_id2 ?>" type="number" value="<?=$num_of_meals2?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">		
<i id="qty-plus<?=$meal_options_id2 ?>" class="fa fa-plus-circle controls" style="color: #d7d6d0;margin-left:10px"></i>
</div>

Open in new window


How can I make the plus circle act like a addition of qtys in the input box, and the minus to remove?
And as you can see the id is dynamic? can anyone help?
Avatar of Mukesh Yadav
Mukesh Yadav
Flag of India image

For this, you need to bind the onclick event handler for both the icons to increase and decrease the field value and onload make the field read-only so that user can't make changes in value directly. On minus icon click we will decrease the field current value with the field step value and also check for the min attribute value and on the plus icon click we will increase the field current value with the field step attribute value.

That's it;

Here is the working example: https://jsfiddle.net/itzmukeshy7/85fr9uye/

<div style="margin-right: 10px;margin-top: -15px">
<input type="hidden" name="meal_id[]" value="<?php echo $meal_options_id2?>">
<i id="qty-minus<?=$meal_options_id2 ?>" class="fa fa-minus-circle controls" style="color: #d7d6d0;margin-right:10px"></i>
<input name="qty[]" id="qty<?=$meal_options_id2 ?>" type="number" value="<?=$num_of_meals2?>" min="0" step="1" style="border:1px solid #d7d6d0;background:transparent;width:35px;height:33px;color:#000;font-size:21px;font-weight:700;">		
<i id="qty-plus<?=$meal_options_id2 ?>" class="fa fa-plus-circle controls" style="color: #d7d6d0;margin-left:10px"></i>
</div>
<script>
$(function(){
  var $field = $('#qty<?=$meal_options_id2 ?>');
  $field.attr('readonly', true);
  var minVal = parseInt($field.attr('min') || 0);
  var step = parseInt($field.attr('step') || 1);

  $('#qty-minus<?=$meal_options_id2 ?>').on('click', function(){
    var val = parseInt($field.val() || 0);
    val = (val - step);
    if(val < minVal){
      val = minVal;
    }
    $field.val(val);
  });

  $('#qty-plus<?=$meal_options_id2 ?>').on('click', function(){
    var val = parseInt($field.val() || 0);
    val = (val + step);    
    if(val < minVal){
      val = minVal;
    }
    $field.val(val);
  });
});
</script>

Open in new window

Avatar of Jazzy 1012
Jazzy 1012

ASKER

It didn't work  the $meal_option_id, is inside its own loop, its a very long coding processes.
Okay, no issue we can handle that thing as well like this:

Same working with 3 fields in the fiddle as well: https://jsfiddle.net/itzmukeshy7/85fr9uye/

<?
/* php for loop start */

$ids[] = $meal_options_id2;

/* php for loop end */
?>
<script>
$(function(){
  var ids = <?=json_encode($ids)?>;
	jQuery(function() {
		for (var i = 0; i < ids.length; i++) {
			(function() {
				var $field = $('#qty' + ids[i]);
				$field.attr('readonly', true);
				var minVal = parseInt($field.attr('min') || 0);
				var step = parseInt($field.attr('step') || 1);

				$('#qty-minus' + ids[i]).on('click', function() {
					var val = parseInt($field.val() || 0);
					val = (val - step);
					if (val < minVal) {
						val = minVal;
					}
					$field.val(val);
				});

				$('#qty-plus' + ids[i]).on('click', function() {
					var val = parseInt($field.val() || 0);
					val = (val + step);
					if (val < minVal) {
						val = minVal;
					}
					$field.val(val);
				});
			})();
		}
	});
</script>

Open in new window

I put some styling to above :)

https://jsfiddle.net/ztvssLLu/
Cool, It looks great thanks, @Huseyin
ASKER CERTIFIED SOLUTION
Avatar of Nicholas
Nicholas

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial