CODEWITHSUNDEEP
javascriptjquery
Drew Elias
Drew Elias

Reputation: 43

Get total amount of JavaScript form

I am still learning JavaScript and need a hand on updating my script to tally multiple items in my form. I use this script on my form to grab the value of a radio button and add that value to the 'Amount' field on an event checkout form.

$(function(){
    $('.ticketAmount').click(function() {
        $('#Amount').val(this.value);
    });
});

Now, I have a new form that has a few options to go along with the ticket selection. Now, the customer selects the ticket and has a few check boxes to add a private tour and assorted merchandise.

Here is my HTML code:

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>

I want the checkboxes at the bottom to have their values added to the total amount when they are checked. Any help would be greatly appreciated.

Upvotes: 4

Views: 664

Answers (4)

pjobs
pjobs

Reputation: 1247

Here is the way I do it, and I think is the simplest solution

As these are currencies, I used float and trimmed the amount to two decimals.

https://jsfiddle.net/ysx66yvr/

$(function(){
    $('.ticketAmount,#privateTour,#meetTheChef').click(function() {
        CalculateAmount();
    });

    function CalculateAmount()
    {
        var ticketPrice = parseFloat($('.ticketAmount:checked').val());
        var otherPrices = 0.0;
        if($("#meetTheChef").is(':checked'))
            otherPrices = parseFloat($("#meetTheChef").val());
        if($("#privateTour").is(':checked'))
            otherPrices = otherPrices + parseFloat($("#privateTour").val());
        $('#Amount').val((ticketPrice + otherPrices).toFixed(2));
    }
});

Html is

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" id="privateTour" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" id="meetTheChef" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>
    <input type="text" id="Amount">

Upvotes: 0

Aravind Sivam
Aravind Sivam

Reputation: 1099

try this

<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da1" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da1" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>


$('.ticketAmount,.ticketAddition').click(function () {
    var total = parseInt($('input[name=da]:checked').val());
    $('input[name=da1]:checked').each(function () {
        total += parseInt($(this).val());
    });
    alert(total);
});

Upvotes: 0

ozil
ozil

Reputation: 7117

var sum = 0;
$('.ticketAddition').change(function () {

    if ($(this).prop('checked') == true) {
        sum = sum + parseInt($(this).val());
    }
    else{
        sum = sum - parseInt($(this).val());
    }
    alert(sum);
});

demo

Upvotes: 0

Noble Mushtak
Noble Mushtak

Reputation: 1784

Add the value to the total when the buttons are checked and then subtract the value when the buttons are unchecked. This can be done with the onchange event or with the .change() jQuery method.

$(function(){
    //ticketAmount for radio buttons, ticketAddition for checkboxes
    var ticketAmount = 0, ticketAddition = 0;
    $(".ticketAmount").change(function() {
        //Set ticketAmount to the value of the button checked.
        var value = parseInt(this.value);
        ticketAmount = value;
        $('#amount').text((ticketAmount+ticketAddition)+".00");
    });
    $(".ticketAddition").change(function() {
        //Add or subtract the value of the button from ticketAddition
        //depending on whether or not the button has been checked or unchecked.
        var value = parseInt(this.value);
        if (this.checked) ticketAddition += value;
        else ticketAddition -= value;
        $('#amount').text((ticketAmount+ticketAddition)+".00");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="radio" name="da" value="150" class="ticketAmount" />
    <strong>Regular Ticket $150.00</strong>
</div>
<div>
    <input type="radio" name="da" value="250" class="ticketAmount" />
    <strong>Couples Ticket $250.00</strong>
</div>
  <div>
    <input type="radio" name="da" value="1500" class="ticketAmount" />
    <strong>Table (Seats 10 Individuals) 1500.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="50" class="ticketAddition" >
    <strong>Private Tour $50.00</strong>
</div>
<div>
    <input type="checkbox" name="da" value="25" class="ticketAddition" >
    <strong>Meet the Chef $25.00</strong>
</div>
<div><strong>Total : $<span id="amount">0.00</span></strong></div>

Upvotes: 1

Related Questions