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

Posted 2023-05-09

【中文标题】通过 AJAX 更新单选按钮更改的表单值

【英文标题】：Update form values on radio button change via AJAX

【发布时间】：2016-09-26 03:12:53

【问题描述】：

我有以下表格：

<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,
    );

【参考方案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);

);

【讨论】：

嗨，我想我遵循这个，我在我的问题中添加了我认为正确的内容，尽管这对更改没有影响

啊，我明白了，是我编写 .val() 的方式有问题。感谢您的帮助