Sam Skirrow Sam Skirrow - 6 months ago 24
Ajax Question

Update form values on radio button change via AJAX

I have the following form:

<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>


It is 3 radio buttons where the user can select a payment period (monthly, quarterly or yearly). And then a slider (using jquery ui slider) where the user can select an amount to pay.

The code for my slider is as follows:

<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>


What I would like to happen is the following, when a user checks a different radio button, I'd liek the maxValue and stepValue to change. For example:
Monthly: maxValue = 25, stepValue = 0.1
Quarterly: maxValue = 65, stepValue = 0.5
Yearly: maxValue = 220, stepValue = 1

I'm a bit stuck as to how to do this - is there a way to do it via AJAX so when a user changes the payment period, I could add the class "updating" to the form and slightly fade it out whilst the values update.

Any help would be useful on this as I'm a bit lost on this.

Update code:

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

You don't need ajax - you have everything you need to work on the client side. You just need to adjust some options on your slider UI. Here's a partly-finished snippet to get you going:

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

});