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>
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?
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/itzmu keshy7/85f r9uye/
Same working with 3 fields in the fiddle as well: https://jsfiddle.net/itzmu
<?
/* 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>
Cool, It looks great thanks, @Huseyin
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
That's it;
Here is the working example: https://jsfiddle.net/itzmu
Open in new window