I am building a payment form, and the total amount shown to the user depends on which plan they select at the top of the form. But I haven't written it correctly because nothing happens when I check either radio button.
This is a snippet from the code for the plan selector:
<form id="payment-form" ...>
...
<label class='control-label'>Plan</label><br>
<input type='radio' name='Product' value='Pro Monthly' checked> Monthly
<input type='radio' name='Product' value='Lifetime'> Lifetime
And this snippet is for the total amount shown to the user:
Total: <span class='amount'></span>
And this is the jQuery I have written to add the amount payable to that span:
$('#payment-form input').on('change', function () {
var plan = $('input[name=Product]:checked', '#payment-form').val();
if (plan == "Lifetime") {
var price = "£30";
} else if (plan == "Pro Monthly") {
var price = "£3 a month";
}
$("span.amount").html(price);
});
I would be most grateful if someone could tell me what I've done wrong with this.