Limit number of clicks on radio button and multiply by a number

Question

As you can see in the jsfiddle, when the #CreditCard radio button is clicked, the Total is multiplied by 1.02 and the Total is updated.

The problem is that the same button can be clicked multiple times and the number keeps multiplying.

I want to limit the number of times a button can be clicked to 1, but also want to be able to switch between Debit card and Credit card. (so when the other button is clicked, the limit is reset to 0?)

Any help is much appreciated.

https://jsfiddle.net/n52fy9am/2/

html

Total: <span id="totalPrice">£154.67</span>
<br>

<form>

<input id="DebitCard" type="radio" name="payment" checked>
<label for="DebitCard">Debit Card</label>
<br>

<input id="CreditCard" type="radio" name="payment">
<label for="CreditCard">Credit Card (2% extra)</label>
<br>

</form>

js

// credit card 2% surcharge
$('#CreditCard').on("click", function() {
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, ""));
    var surcharge = (totalPrice * 1.02).toFixed(2);
    // Update total
    $('#totalPrice').html("£" + surcharge);
});

// remove 2%
$('#DebitCard').on("click", function() {
    var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, ""));
    var surcharge = (totalPrice * 0.98).toFixed(2);
    // Update total
    $('#totalPrice').html("£" + surcharge);
});

Answer 1

Just use a flag to do it. Change the flag when radio button clicked. So that you can control whether to do the calculation or not.

Also, because you round it with toFixed(2) , the decimal part of the number will be messed up when you do the calculation. So use a variable to store the initial value. Put it back when debitCard button is pressed.

var isCreditCard = false;
var initialPrice = 154.67;
$('#totalPrice').html("£" + initialPrice.toString());

// credit card 2% surcharge
$('#CreditCard').on("click", function() {
    if (!isCreditCard) {
        var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, ""));
        var surcharge = (totalPrice * 1.02).toFixed(2);
        // Update total
        $('#totalPrice').html("£" + surcharge);

        isCreditCard = true;
    }
});

// remove 2%
$('#DebitCard').on("click", function() {
    if (isCreditCard) {
        // Update total
        $('#totalPrice').html("£" + initialPrice.toString());
        isCreditCard = false;
    }
});

Answer 2

I took your JS fiddle and turned into a stack snippet ;)

I modified the code and placed comments wherever necessary. I store initial count values that get incremented on every click, if that number exceeds 0 then the function gets cancelled, this remains true until the other radio is checked which resets the previously clicked one.

 $(function() { // keep count of n times clicked var creditCardCount = 0; var debitCardCount = 0; // credit card 2% surcharge $('#CreditCard').on("change", function() { // if amount is greater or equal to 1 then abort the function if (creditCardCount > 0) { return false; } var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\\\.])/g, "")); var surcharge = (totalPrice * 1.02).toFixed(2); // Update total $('#totalPrice').html("£" + surcharge); // increment credit card count creditCardCount++; // reset the other option to 0 debitCardCount = 0; }); // remove 2% // do the same here but for the opposite cards $('#DebitCard').on("change", function() { if (debitCardCount > 0) { return false; } var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\\\.])/g, "")); var surcharge = (totalPrice * 0.98).toFixed(2); // Update total $('#totalPrice').html("£" + surcharge); debitCardCount++; creditCardCount = 0; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Total: <span id="totalPrice">£154.67</span> <br> <form> <input id="DebitCard" type="radio" name="payment" checked> <label for="DebitCard">Debit Card</label> <br> <input id="CreditCard" type="radio" name="payment"> <label for="CreditCard">Credit Card (2% extra)</label> <br> </form> 

Answer 3

I suggest you simplify your code. Check demo - Fiddle :

$(function() {
    var lastRadioClicked = 'DebitCard',
        canClick = true;

    $('[name="payment"]').on("click", function() {
        var surchargePercent;
        if (lastRadioClicked === this.id) {
            if (canClick) {
                if (this.id === 'DebitCard') {
                    // debit        
                    surchargePercent = 0.98;
                } else {
                    // credit    
                    surchargePercent = 1.02;
                }
                canClick = false;
                var totalPrice = parseFloat($('#totalPrice').text().replace(/([^0-9\\.])/g, ""));
                var surcharge = (totalPrice * surchargePercent).toFixed(2);
                // Update total
                $('#totalPrice').html("£" + surcharge);
            }
        } else {
            lastRadioClicked = this.id;
            canClick = true;
        }


    });
});