javascript - 通过 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 个单选按钮，用户可以在其中选择付款周期(每月、每季度或每年)。然后是一个 slider (使用 jquery ui slider )，用户可以在其中选择支付金额。

我的 slider 的代码如下:

<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 - 您拥有在客户端工作所需的一切。您只需要调整 slider UI 上的一些选项即可。这是一个部分完成的片段，可以帮助您开始:

// 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});

});