Form doesn't autosubmit on input change-CodePudding

I'm creating my own little WP plugin that enables filtering products by attributes with slider instead with dropdown or what is default...

Everything works great, but now I want to auto submit form when user changes slider settings. For now I have a buttton that on click filters products.

My form (PHP)

<form id="<?php echo $id; ?>"  method="get" action="<?php echo esc_url($form_action); ?>">
    <div >
        <div ></div>
        <div >
            <input type="hidden" id="<?php echo $min_value_key; ?>" name="<?php echo $min_value_key; ?>"
                value="<?php echo esc_attr($current_min_value); ?>" data-min="<?php echo esc_attr($min_value); ?>"
                placeholder="<?php echo esc_attr__('Min value', 'woocommerce'); ?>" />
            <input type="hidden" id="<?php echo $max_value_key; ?>" name="<?php echo $max_value_key; ?>"
                value="<?php echo esc_attr($current_max_value); ?>" data-max="<?php echo esc_attr($max_value); ?>"
                placeholder="<?php echo esc_attr__('Max value', 'woocommerce'); ?>" />
            <input type="hidden" id="<?php echo $query_key; ?>" name="<?php echo $query_key; ?>"
                value="<?php echo esc_attr($query); ?>"
                placeholder="<?php echo esc_attr__('Query type', 'woo-num-slider'); ?>" />
            <div >
                <?php echo esc_html__('', 'woo-num-slider'); ?><span >
                    <?php echo $current_min_value . $unit; ?>
                </span><span >
                    <?php echo $current_max_value . $unit; ?>
                </span>
            </div>
            <button type="submit" >
                <?php echo esc_html__('Filter', 'woocommerce'); ?>
            </button>
            <?php echo wc_query_string_form_fields(null, array($min_value_key, $max_value_key, $query_key, 'paged'), '', true); ?>
            <div ></div>
        </div>
    </div>
</form>

And my JS code for autosubmit (that doesnt work):

// Auto submit form
$('.woo_num_slider_amount #<?php echo $min_value_key; ?>').on('change', function() {
    $('#<?php echo $id; ?>').submit();
});

Any ideas why my JS code doesnt work?

I tried searching on web but none of the solutions worked so far.

CodePudding user response：

Looking at the code for woo-num-slider, it uses jQuery val method to change the hidden fields. Per jQuery Docs

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

A suggestion might be to bind jquery-ui-slider's change event itself, e.g. $( ".woo_num_slider" ).on( "slidechange", function( event, ui ) { ... } );