0

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 = "&pound;30";
     } else if (plan == "Pro Monthly") {
         var price = "&pound;3 a month";
     }
     $("span.amount").html(price);
});

I would be most grateful if someone could tell me what I've done wrong with this.

Vsevolod Goloviznin
  • 12,074
  • 1
  • 49
  • 50
jonbaldie
  • 378
  • 5
  • 12
  • possible duplicate of [click or change event on radio using jquery](http://stackoverflow.com/questions/5165862/click-or-change-event-on-radio-using-jquery) – hon2a Nov 26 '14 at 11:07
  • Works fine for me: http://jsfiddle.net/3rror404/12eo9hz5/1/ – Turnip Nov 26 '14 at 11:11
  • Did you load jquery? jsfiddle does that for you.... – Paul Nov 26 '14 at 11:12
  • Thanks upsidedown, I must have gone wrong somewhere else. I should initialise the amount to be £3 a month rather than blank. – jonbaldie Nov 26 '14 at 11:14

3 Answers3

0

Try this code:

The result will come:

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

Total: <span class='amount'></span>

JS:

$(document).ready(function(){

$('#payment-form input').on('change', function () {
var plan = $('input[name=Product]:checked', '#payment-form').val();

if (plan == "Lifetime") {
    var price = "&pound;30";

} else if (plan == "Pro Monthly") {
    var price = "&pound;3 a month";
}
$("span.amount").html(price);
});
}):

For reference DEMO

vengatesh rkv
  • 327
  • 2
  • 16
0

please checkout the plunker i have created.

$(document).ready(function() {
$('#payment-form input').on('change', function() {

  var price;
  var plan = $('input[name=Product]:checked', '#payment-form').val();

  if (plan == "Lifetime") {
  price = "30";
  alert(price);
} else if (plan == "Pro Monthly") {
  price = "3 a month";
}
$("#amount").html(price);
 });
});
http://plnkr.co/edit/roUrBSStRbN9aKuJ5vIK

you should register the event binding in the document.ready.

Kiran P
  • 299
  • 2
  • 11
  • Thanks Kiran. I can't believe this but I forgot to wrap the jQuery with the $(document) tag. Schoolboy error. Did the trick. – jonbaldie Nov 26 '14 at 11:23
0
$('#payment-form input').on('change', function () {
 if ($("input[name='Product']:checked").val() == 'Lifetime') {
 var price = "&pound;30";
 } else if ($("input[name='Product']:checked").val() == 'Pro Monthly') {
 var price = "&pound;3 a month";
 }
 $("span.amount").html(price);
});

Demo