i am trying to make increment decrements box.
check heredemo
i want the box like this
i think need to change in html code
jQuery(function() {
jQuery("div.add-to-cart .qty_pan").append('<div class="inc add">›</div><div class="dec add">‹</div>');
jQuery(".inputQty").on('click', '.add', function() {
var jQueryadd = jQuery(this);
var oldValue = jQueryadd.parent().find("input").val();
var newVal = 0;
if (jQueryadd.text() == "+") {
newVal = parseFloat(oldValue) + 1;
// AJAX save would go here
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
// AJAX save would go here
}
if(oldValue == 1){
newVal = parseFloat(oldValue);
}
}
jQueryadd.parent().find("input").val(newVal);
});
});
<div class="qty_pan">
<input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>
please help me to edit this box with same functionality
Following is thing which you like to do.
$(function(){
$("#plus").click(function(){
$("#qty").val( Number($("#qty").val()) + 1 );
});
$("#minus").click(function(){
$("#qty").val( Number($("#qty").val()) - 1 );
});
});
.btnplus{
display:inline-block;
}
.qty_pan{
display:inline-block;
}
.btnminus{
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus" class="btnplus">+</button>
<div class="qty_pan">
<input type="text" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>
<button id="minus" class="btnminus">-</button>
And Changes/Updating in your code is following:
jQuery(function() {
jQuery("div.add-to-cart .qty_pan").append('<div class="inc add">›</div><div class="dec add">‹</div>');
jQuery("#plus, #minus").click(function(){
var jQueryadd = jQuery(this);
var oldValue = jQueryadd.parent().find("input").val();
var newVal = 0;
if (jQueryadd.text() == "+") {
newVal = parseFloat(oldValue) + 1;
// AJAX save would go here
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
// AJAX save would go here
}
if(oldValue == 1){
newVal = parseFloat(oldValue);
}
}
jQueryadd.parent().find("input").val(newVal);
});
});
.btnplus{
display:inline-block;
}
.qty_pan{
display:inline-block;
}
.btnminus{
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus" class="btnplus">+</button>
<div class="qty_pan">
<input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
</div>
<button id="minus" class="btnminus">-</button>
Hope it helps.
Try this:
$('#inc, #dec').on('click', function(){
var val = +$('#qty').val();
this.id === "inc" ? $('#qty').val(val+1) : $('#qty').val(val-1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qty_pan">
<span id='dec'> - </span><input type="number" min="1" max="1000" name="qty" id="qty" value="1" title="" class="input-text qty" /><span id='inc'> + </span>
</div>
Related
I have three buttons like this on my site:
I'm trying to increment and decrement the counters but it's only working for two, the first works fine but the second is adding 2 to every increment and the third isn't working at all.
Here is the code:
$('.plus').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
console.log(val);
});
$('.minus').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus1" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus1" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus2" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus2" type="button" value="+">
<label class="quantitiy" for="Quantity-collection-template-new"></label>
<input class="minus minus3" type="button" value="-">
<input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input="">
<input class="plus plus3" type="button" value="+">
It's easier to answer this here.
You're using .plus1 and .plus2 but there's no .plus3 bindings on the website. Which is different from what you posted here, that's why is working, so, my advice is:
Just remove the duplicate and use the same logic here, try it again and let us know.
$('.plus').on('click', function(e) { // omitted });
$('.minus').on('click', function(e) { // omitted });
This is what you have right now on the website:
$('.plus1').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus1').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
And another section;
$('.plus2').on('click', function(e) {
var val = parseInt($(this).prev('input').val());
$(this).prev('input').val(val + 1);
});
$('.minus2').on('click', function(e) {
var val = parseInt($(this).next('input').val());
if (val !== 0) {
$(this).next('input').val(val - 1);
}
if (val == 0) {
$(this).next('input').val(1);
}
});
A couple of suggestions;
Don't use the same id, create some logic to add at least an index for each id if they represent more or less the same thing. product-1 and product-2 and so on. Same Id is recipe for disaster and a no-no from the start.
Remember to update both id and for properties with unique identifiers.
minus/plus - index works.
I have an issue I know might be basic but has been giving me a headache. Any help is highly appreciated
I have a form named timesheets looping through a dates array in laravel. I am trying to add up form fields hour + hour1 + hour2 and I want them added up and displayed in the total_hours field.
My problem is only the top row gets added(i don't get any errors in the web console)
!https://imgur.com/gNdJVNE
//app.js code
el: '#timesheet',
data: function(){
return {
hour: '',
hour1: '',
hour2: '',
hour3: '',
hour4: '',
hour5: '',
total_hours: ''
};
},
computed: {
TotalTimesheets: function() {
return (this.hour + this.hour1 + this.hour2 + this.hour3 + this.hour4 + this.hour5)
}
}
//my _form.blade.php code:
#foreach($dates as $date)
<strong>{{$date->date}}</strong>
<input type="text" name="hour[]" value="0" id="hour" v-model.number="hour" class="form-control">
#if(empty($analysis->act1))
#else
<input type="text" name="hour1[]" value="0" id="hour1" v-model.number="hour1" class="form-control>
#endif
#if(empty($analysis->act2))
#else
<input type="text" name="hour2[]" value="0" id="hour2" v-model.number="hour2" class="form-contro">
#endif
#if(empty($analysis->act3))
#else
<input type="text" name="hour3[]" value="0" id="hour3" v-model.number="hour3" class="form-control">
#endif
#if(empty($analysis->act4))
#else
<input type="text" name="hour4[]" value="0" id="hour4" v-model.number="hour4" class="form-control">
#endif
#if(empty($analysis->act5))
#else
<input type="text" name="hour5[]" value="0" id="hour5" v-model.number="hour5" class="form-control">
#endif
<input type="text" name="total_hours[]" :value="TotalTimesheets" id="total_hours" class="form-control" max="9" >
#endforeach
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">{{ $buttonText }}</button>
</div>
I will give you only a guide. This is just a "pseudo code" I did not check it.
Firstly, you need to create a component to render only one row of your sheet. Something like:
<template>
<div>
<strong>{{date}}</strong>
<div v-for="(hour, index) in hours" :key="index" >
<input type="text" v-model.number="hour.value">
</div>
<input type="text" :value="total">
</div>
</template>
<script>
export default{
name: 'ActiveHoursRow'
props:['date','hours'],
computed:{
total(){
return this.hours.reduce((a, v) => a + v);
}
}
}
</script>
Secondly, you need to create a component that renders the whole sheet with the help of row-rendering component.
<template>
<div v-for="(row, index) in backendData">
<ActiveHoursRow :date="row.date" :hours="row.hours" />
</div>
</template>
<script>
export default{
name: 'ActiveHoursRow'
data: function(){
return {
"backendData":[
#foreach($dates as $date)
{
"date":"{{$date->date}}",
"hours": [
#if(empty($analysis->act1))
#else
{"name":"12_07_2019_act1", "value": 0},
#endif
#if(empty($analysis->act2))
#else
{"name":"12_07_2019_act2", "value": 0},
#endif
]
},
#endforeach
]
}
}
}
</script>
It also always better to draw data as JSON in and then use it. It is more clear to understand and later you can easily to switch to dynamic loading.
See more about components: https://v2.vuejs.org/v2/guide/components.html
thanks for the help, but I decided to use Jquery as shown below.
$(document).on("keyup change paste", "td > input.auto-calc", function() {
row = $(this).closest("tr");
h = parseFloat(row.find("td input.hour").val()) || 0;
h1 = parseFloat(row.find("td input.hour1").val()) || 0;
h2 = parseFloat(row.find("td input.hour2").val()) || 0;
h3 = parseFloat(row.find("td input.hour3").val()) || 0;
h4 = parseFloat(row.find("td input.hour4").val()) || 0;
h5 = parseFloat(row.find("td input.hour5").val()) || 0;
row.find(".total_hours").val(h + h1 + h2 + h3 + h4 + h5);
var sum = 0;
var sum1 = 0;
var sum2 = 0;
var sum3 = 0;
var sum4 = 0;
var sum5 = 0;
var sum6 = 0;
$("input.total_hours").each(function() {
sum += +$(this).val();
});
$("input.hour").each(function() {
sum1 += +$(this).val();
});
$("input.hour1").each(function() {
sum2 += +$(this).val();
});
$("input.hour2").each(function() {
sum3 += +$(this).val();
});
$("input.hour3").each(function() {
sum4 += +$(this).val();
});
$("input.hour4").each(function() {
sum5 += +$(this).val();
});
$("input.hour5").each(function() {
sum5 += +$(this).val();
});
$("#total-month").text(sum);
$("#total-hour").text(sum1);
$("#total-hour1").text(sum2);
$("#total-hour2").text(sum3);
$("#total-hour3").text(sum4);
$("#total-hour4").text(sum5);
$("#total-hour5").text(sum6);
});
var i = 0;
$('.addy').on('click', function () {
++i;
addy();
});
function addy(){
var tr='<tr>'
+'<td><input type="text" name="timesheets['+i+'][date]" id="date[]" class="form-control " data-provide="datepicker" autocomplete="off"><input type="hidden" id="analysis_id" name="timesheets['+i+'][analysis_id]" value="{{$analysis->analysisid}}">'
+'<input type="hidden" id="activity_id5" name="timesheets['+i+'][activity_id5]" value="{{#$tact6->activity_id5}}"><input type="hidden" id="activity_id4" name="timesheets['+i+'][activity_id4]" value="{{#$tact5->activity_id4}}"><input type="hidden" id="activity_id3" name="timesheets['+i+'][activity_id3]" value="{{#$tact4->activity_id3}}"><input type="hidden" id="activity_id2" name="timesheets['+i+'][activity_id2]" value="{{#$tact3->activity_id2}}"><input type="hidden" id="activity_id1" name="timesheets['+i+'][activity_id1]" value="{{#$tact2->activity_id1}}"><input type="hidden" id="activity_id" name="timesheets['+i+'][activity_id]" value="{{#$tact1->activity_id}}"></td>'
+'<td><input type="text" name="timesheets['+i+'][hour]" value="0" id="hour" class="form-control hour auto-calc"></div></td>'
+'#if(empty($analysis->act1)) #else <td><input type="number" name="timesheets['+i+'][hour1]" value="0" id="hour1" class="form-control hour1 auto-calc" min="0" max="8"></div></td>#endif'
+'#if(empty($analysis->act2)) #else <td><input type="number" name="timesheets['+i+'][hour2]" value="0" id="hour2" class="form-control hour2 auto-calc" min="0" max="8"></div></td>#endif'
+'#if(empty($analysis->act3)) #else <td><input type="number" name="timesheets['+i+'][hour3]" value="0" id="hour3" class="form-control hour3 auto-calc" min="0" max="8"></div></td>#endif'
+'#if(empty($analysis->act4)) #else <td><input type="number" name="timesheets['+i+'][hour4]" value="0" id="hour4" class="form-control hour4 auto-calc" min="0" max="8"></div></td>#endif'
+'#if(empty($analysis->act5)) #else <td><input type="number" name="timesheets['+i+'][hour5]" value="0" id="hour5" class="form-control hour5 auto-calc" min="0" max="8"></div></td>#endif'
+'<td><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-list-ol"></i></span></div><input type="text" name="timesheets['+i+'][total_hours]" id="total_hours" class="form-control total_hours" max="9" ></div><input type="hidden" id="approved" name="timesheets['+i+'][approved]" value="No"> <input type="hidden" id="approved_by" name="timesheets['+i+'][approved_by]" value="{{$approved->supervisor_id}}"></td>'
+'<td><button type="button" class="btn btn-danger remove">Remove</button></td>'
+'</tr>'
$('tbody').append(tr);
};
$('body').on('click','.remove', function () {
var last=$('tbody tr').length;
$(this).parent().parent().remove();
});
WooCommerce Add To Cart Button text change using jQuery if Quantity increase.
jQuery(document).on("change",'.minus', function() {
var productquantity = jQuery('.qty').attr('value');
if (productquantity == 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("REQUEST A QUOTE");
});
}
})
While selecting buttons value never changes :S
HTML FOR BUTTON AND SELECTOR
<div class="quantity buttons_added">
<input type="button" value="-" class="minus button is-form"><input type="number" step="1" min="1" max="9999" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric"><input type="button" value="+" class="plus button is-form"></div>
<button type="submit" name="add-to-cart" value="1520" class="single_add_to_cart_button button alt" style="display: block !important">Add to Cart</button>
jsFiddle
$(document).ready(function ()
{
$('body').on("click",'.minus',function ()
{
var qtyval = $('.qty').val();
if(qtyval >= 0)
{
var newQTY = parseInt(qtyval) - parseInt(1);
if(newQTY >= 15)
{
$('.single_add_to_cart_button').text("Request a Quote");
}
if(newQTY < 15)
{
$('.single_add_to_cart_button').text("Add to Cart");
}
$('.qty').val(newQTY);
}
});
$('body').on("click",'.plus',function ()
{
var qtyval = $('.qty').val();
var newQTY = parseInt(qtyval) + parseInt(1);
if(newQTY >= 15)
{
$('.single_add_to_cart_button').text("Request a Quote");
}
$('.qty').val(newQTY);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="quantity buttons_added">
<input type="button" value="-" class="minus button is-form"><input type="number" step="1" min="1" max="9999" name="quantity" value="1" title="Qty"
class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric"><input type="button" value="+" class="plus button is-form"></div>
<button type="submit" name="add-to-cart" value="1520" class="single_add_to_cart_button button alt" style="display: block !important">Add to Cart</button>
jQuery(document).on("click",'.plus, .minus', function() {
var productquantity = jQuery('.qty').attr('value');
if (productquantity == 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("REQUEST A QUOTE");
});
} else if(productquantity != 15) {
jQuery('.single-product').each(function() {
jQuery(".single_add_to_cart_button").text("ADD TO CART NOW");
});
}
})
Only problem was on change to onclick.
I have code like this:
<script>
(function() {
window.inputNumber = function(el) {
var min = el.attr('min') || false;
var max = el.attr('max') || false;
var els = {};
els.dec = el.prev();
els.inc = el.next();
el.each(function() {
init($(this));
});
function init(el) {
els.dec.on('click', decrement);
els.inc.on('click', increment);
function decrement() {
var value = el[0].value;
value--;
(value<1) ? value=1 : '';
if(!min || value >= min) {
el[0].value = value;
}
}
function increment() {
var value = el[0].value;
value++;
if(!max || value <= max) {
el[0].value = value++;
}
}
}
};
})();
inputNumber($('.input-number'));
</script>
but this will change every input field when I click on one decrement or increment... But I need to be separated and dynamic, here is html:
<div class="quantity">
<span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left"></i></span><input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right"></i></span>
</div>
I can have more then one input field, and all need to work separately... Any solution?
The problem is here
els.dec = el.prev();
els.inc = el.next();
.prev() and .next() will get all the preceding and following elements of the matched elements in el.
Remove this step completely and use
function init(el) {
el.prev().on('click', decrement);
el.next().on('click', increment);
// ...
instead.
(function() {
window.inputNumber = function(el) {
var min = el.attr('min') || false;
var max = el.attr('max') || false;
el.each(function() {
init($(this));
});
function init(el) {
el.prev().on('click', decrement);
el.next().on('click', increment);
function decrement() {
var value = el[0].value;
value--;
(value < 1) ? value = 1: '';
if (!min || value >= min) {
el[0].value = value;
}
}
function increment() {
var value = el[0].value;
value++;
if (!max || value <= max) {
el[0].value = value++;
}
}
}
};
})();
inputNumber($('.input-number'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
<span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
<input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>
<div class="quantity">
<span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
<input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>
<div class="quantity">
<span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
<input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>
You should initialize your code like that:
$('.input-number').each(function(){
inputNumber($(this));
})
instead of:
inputNumber($('.input-number'));
See JS fiddle
I have a form with this inputs and buttons :
<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
<div id="mydiv"></div>
<input type="submit" id ="button2" value="next">
And I'm using this javascript code to append number of the "inputs" that the user have insert in this button :
$(function()
{
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val();
$("#mydiv").html("");
for(i=1;i<=c;i++)
{
$("#mydiv").append('<input type="text" id="name'+i+'" name="name'+i+'" placeholder="name'+i+'">');
$("#mydiv").append('<input type="number" id="rating'+i+'" name="rating'+i+'" min="1" max="10" placeholder="rating'+i+'"><br/>');
}
});
$("#button2").click(function()
{
if(c===0)
alert('must click on "continue" button');
});
});
});
I'm trying to require the user to enter a value in "inputs" (input type) and click on the "continue" (button1) button. With that way it's not working (must enter a value in the "inputs" but can click on "button2" without clicking on "button1"). How do I require the user to click also on the "button1" (continue) ?
Thanks.
$(function() {
var c = 0;
$("#button1").click(function() {
if( !$('#inputs')[0].checkValidity() ) {
alert( $('#inputs')[0].title );
return false;
}
c = +$("#inputs").val();
$("#mydiv").html("");
for (i = 1; i <= c; i++) {
$("#mydiv").append('<input type="text" id="name' + i + '" name="name' + i + '" placeholder="name' + i + '">');
$("#mydiv").append('<input type="number" id="rating' + i + '" name="rating' + i + '" min="1" max="10" placeholder="rating' + i + '"><br/>');
}
$('#button2').prop('disabled',false);
});
$("#button2").click(function() {
if (c === 0) {
alert('must click on "continue" button');
} else {
alert('Now let us move ahead');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
<div id="mydiv"></div>
<input type="submit" id="button2" value="next" disabled>
$(function() {
var c = 0;
$("#button1").click(function() {
if ($("#inputs").val().length > 0 && $("#inputs").val().length < 3 && $("#inputs").val() != 0) {
c = $("#inputs").val();
$("#mydiv").html("");
for (i = 1; i <= c; i++) {
$("#mydiv").append('<input type="text" id="name' + i + '" name="name' + i + '" placeholder="name' + i + '">');
$("#mydiv").append('<input type="number" id="rating' + i + '" name="rating' + i + '" min="1" max="10" placeholder="rating' + i + '"><br/>');
}
$("#button2").prop('disabled', false);
} else {
$("#button2").prop('disabled', true);
alert("Value is empty / to low / to high. Insert a value between 1 and 99");
}
});
$("#button2").click(function() {
if(c > 0 && $("#inputs").val() > 0){
alert('piu piu');
}
else{
alert('sorry, check your inputs');
$("#button2").prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="inputs" name="inputs" min="3" max="48" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
<div id="mydiv"></div>
<input type="submit" id="button2" value="next" disabled>
You can disable button2 and make it enable on click of button1, see below code
<input type="number" id="inputs" name="inputs" min="3" max="48" pattern=".{1,2}" required title="please enter a value between 3 to 48">
<input type="button" id="button1" value="continue">
<div id="mydiv"></div>
<input type="submit" id ="button2" value="next" disabled>
jQuery
$(function()
{
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val().trim();
$("#mydiv").html("");
for(i=1;i<=c;i++)
{
$("#mydiv").append('<input type="text" id="name'+i+'" name="name'+i+'" placeholder="name'+i+'">');
$("#mydiv").append('<input type="number" id="rating'+i+'" name="rating'+i+'" min="1" max="10" placeholder="rating'+i+'"><br/>');
}
//enable your button 2 if input has value
if(c!='')
$("#button2").removeProp('disabled');
});
$("#button2").click(function()
{
//submit your form here
});
});
Change this line:
c = $("#inputs").val();
to
if($("#inputs").val() != "")
c = $("#inputs").val();