Geek Answers Handbook

Get general JavaScript form

I am still learning JavaScript and need a hand to update my script to count several elements in my form. I use this script in my form to capture the value of a switch and add this value to the Sum field in the event verification form.

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

Now I have a new form that has several options for choosing tickets. Now the client selects a ticket and has several flags to add a private tour and an assortment of goods.

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 below to display their values ​​in total when they are checked. Any help would be greatly appreciated.

+4
source share
4 answers

, ,

, float .

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

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

, , , . onchange .change() jQuery.

$(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>
Hide result
+1
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

0
source

try it

<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);
});
0
source

More articles:


All Articles