javascript - Woocommerce plusminus quantity button changing value but not working actually - Stack Overflow

admin管理员组

文章数量:1287858

I have created a plus/minus quantity button for woomerce single product page.created a new quantity-input.php

<?php
    if ( ! defined( 'ABSPATH' ) ) 
        exit; // Exit if accessed directly
?>
<div class="quantity">
    <input class="minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woomerce' ) ?>" class="input-text qty text" size="4" />
    <input class="plus" type="button" value="+">
</div>

$('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').attr( 'value', val+1 );
});

$('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val( val-1 );
    } 
});

The above code changes the value of the text visually box but doesn't change the value in the code.As a result, woomerce doesn't get any changes of quantity.On the other hand if I press up/down button of keyboard, changes of value is being got by woomerce.I think it is happening because I have used .val() instead of .attr(), I changed to attr() many times but in vain.

I have created a plus/minus quantity button for woomerce single product page.created a new quantity-input.php

<?php
    if ( ! defined( 'ABSPATH' ) ) 
        exit; // Exit if accessed directly
?>
<div class="quantity">
    <input class="minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woomerce' ) ?>" class="input-text qty text" size="4" />
    <input class="plus" type="button" value="+">
</div>

$('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').attr( 'value', val+1 );
});

$('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val( val-1 );
    } 
});

The above code changes the value of the text visually box but doesn't change the value in the code.As a result, woomerce doesn't get any changes of quantity.On the other hand if I press up/down button of keyboard, changes of value is being got by woomerce.I think it is happening because I have used .val() instead of .attr(), I changed to attr() many times but in vain.

• javascript
• php
• jquery
• wordpress
• woomerce

Share Improve this question Follow edited Jan 4, 2016 at 16:43 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Jan 4, 2016 at 16:42 TanvirTanvir 11311 gold badge33 silver badges1111 bronze badges 7

• This seems to work fine in jsfiddle: jsfiddle/o2amr91n – DaMaGeX Commented Jan 4, 2016 at 17:20
• Yes .attr() is working but still woomerce doesn't get value of input.Example is here jollyfine.co/shop/product/12-box-of-pick-your-own – Tanvir Commented Jan 4, 2016 at 17:44
• You can try looking into this plugin: nwordpress/plugins/woomerce-quantity-increment – DaMaGeX Commented Jan 4, 2016 at 18:01
• It looks like input tags with these classes input-text qty text register the change when u click on the quantity number. And those changes reflect on your basket as well. Maybe on clicking .plus and .minus u should update the closest input element with these classes: input-text qty text as well. – sandeep s Commented Jan 4, 2016 at 18:29
• @sandeep You are right.The problem is in there.I checked it by removing input-text qty text .Then woomerce doesn't get input value anymore.Can you suggest me how to fix it with my js? – Tanvir Commented Jan 4, 2016 at 19:35

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

Following up on my above ment, this answer explains that jQuery's change event is only triggered by a manual browser event. Therefore, changing the value of an input via jQuery does not trigger the change event so we need to trigger it manually by calling .change() on the input.

Here is my updated fiddle showing the fix outside of the Mix and Match context.

Pertaining to Mix and Match specifically, we just need to chain a .change() event to the input after the value has been changed. I tweaked how the input is identified, but that's not a big difference.

Edit: Now takes into account the input's "step".

$('.quantity').on('click', '.plus', function(e) {
    $input = $(this).prev('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    $input.val( val + step ).change();
});

$('.quantity').on('click', '.minus', 
    function(e) {
    $input = $(this).next('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    if (val > 0) {
        $input.val( val - step ).change();
    } 
});

I'll be adding this to my FAQ soon.

@helgatheviking your code doesn't work for me.But I am happy that your suggestions solved my problem.I just added .change() along with .val() and it works :)

the final code Is:

$('.plus').on('click',function(e){
    var val = parseInt($(this).prev('input').val());    
    $(this).prev('input').val( val+1 ).change();
});

$('.minus').on('click',function(e){

    var val = parseInt($(this).next('input').val());
    if(val !== 0){
        $(this).next('input').val( val-1 ).change();
    } 
});

本文标签： javascriptWoocommerce plusminus quantity button changing value but not working actuallyStack Overflow