通过 AJAX 更新单选按钮更改的表单值

Question

我有以下表格：

<form method="post" action="options.php" id="pay_what_you_want_form">

    <input type="radio" name="payment_period" value="monthly" id="monthly" checked><label for="monthly" class="payment_period_label">Monthly</label><br>
    <input type="radio" name="payment_period" value="quarterly" id="quarterly"><label for="quarterly" class="payment_period_label">Quarterly</label><br>
    <input type="radio" name="payment_period" value="yearly" id="yearly"><label for="yearly" class="payment_period_label">Yearly</label><br>

    <input type="hidden" id="payment_amount" name="payment_amount" value="<?php echo esc_attr( get_option('payment_amount') ); ?>">
    <div id="slider"></div>

    <?php submit_button('Update'); ?>

</form>

它是 3 个单选按钮，用户可以在其中选择付款期限（每月、每季度或每年）。然后是一个滑块（使用 jquery ui 滑块），用户可以在其中选择要支付的金额。

我的滑块代码如下：

<script>
        jQuery(function($) {
            var initialValue = 7.5; 
            var sliderTooltip = function(event, ui) {
                var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
                var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
                $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
                $("#payment_amount").val(ui.value); //change amount in hidden input field
            }
            var maxValue = 25;
            var stepValue = 0.1;

            $("#slider").slider({
                value: initialValue,
                min: 0,
                max: maxValue,
                step: stepValue,
                create: sliderTooltip,
                slide: sliderTooltip,
            });
            $("#payment_amount").val($("#slider").slider("value"));
        });
        </script>

我希望发生以下情况，当用户检查不同的单选按钮时，我会更改 maxValue 和 stepValue。例如： 每月：maxValue = 25，stepValue = 0.1 每季度：maxValue = 65，stepValue = 0.5 每年：maxValue = 220，stepValue = 1

我对如何做到这一点有点困惑 - 有没有办法通过 AJAX 做到这一点，所以当用户更改付款期限时，我可以将“更新”类添加到表单并稍微淡出而值更新。

任何帮助都会对此有用，因为我对此有点迷茫。

更新代码：

var newMax = 25;
    $('input[name="payment_period"]').change(function() {

        if($('input[name="payment_period]').val('monthly')) {
            var newMax = 25; //eg
        } else if($('input[name="payment_period]').val('quartely')) {
            var newMax = 65;
        } else if($('input[name="payment_period]').val('yearly')) {
            var newMax = 250;
        } 

        // update the options on the slider
        $('#slider').slider('option', {max: newMax});

    });
$("#slider").slider({
        value: initialValue,
        min: 0,
        max: newMax,
        step: stepValue,
        create: sliderTooltip,
        slide: sliderTooltip,
    });

Answer 1

您不需要 ajax - 您拥有在客户端工作所需的一切。您只需要调整滑块 UI 上的一些选项。这是一个部分完成的sn-p，让你开始：

// bind a handler to the radio buttons
$('input[name="payment_period"]').change(function() {

    // determine which value was pressed, etc...
    var newmax = 50; //eg
    var newmin = 10; //eg

    // update the options on the slider
    $('#slider').slider('option', {max: newmax, min: newmin});

});