javascript total sum function

Question

Sorry all, I'm really trying to learn JS as I'm trying to combine the total sum of the checkbox item selected and also the sum of the item from the radio button selection. My JS is just an attempt but I'm not getting anywhere.

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Order CDs</title>
</head>
<body>

<script type = "text/javascript">

function isChecked(checkbox, sub1) {
    var button = document.getElementById(sub1);

    if (checkbox.checked === true) {
        button.disabled = "";
    } else {
        button.disabled = "disabled";
    }
}

$(document).ready(function(){
    $('#termsChkbx').change(function(){
        if($(this).is(':checked'))
        {
            $(this).parent('p').css('color','black');
        }
        else
        {
             $(this).parent('p').css('color','red');
        }
    });  

$(document).on("click",".chosen",function() {
        var sum=0;
    var chk=$(this).find("input");
    if(chk.is(':checked')) {
        sum = sum + parseInt(chk.val());
    } else {
        sum = sum - parseInt(chk.val());
    }
    $('#total').val(sum);
}); 

});

</script>


<div id="wrapper">
    <h1>Buy CDs</h1>

    <form id="orderForm" action="#" method="get">
        <section id="selectCD">
            <h2>Select CDs</h2>
<?php
include_once('database_conn.php');
$sqlCDs = 'SELECT CDID, CDTitle, CDYear, catDesc, CDPrice FROM nmc_cd b inner join nmc_category c on b.catID = c.catID WHERE 1 order by CDTitle';
$rsCDs = mysqli_query($conn, $sqlCDs);
while ($CD = mysqli_fetch_assoc($rsCDs)) {
    echo "\t<div class='item'>
            <span class='CDTitle'>{$CD['CDTitle']}</span>
            <span class='CDYear'>{$CD['CDYear']}</span>
            <span class='catDesc'>{$CD['catDesc']}</span>
            <span class='CDPrice'>{$CD['CDPrice']}</span>
            <span class='chosen'><input type='checkbox' name='CD[]' value='{$CD['CDID']}' title='{$CD['CDPrice']}' /></span>
        </div>\n";
}
?>
        </section>

        <section id="collection">
            <h2>Collection method</h2>
            <p>Please select whether you want your chosen CD(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
            <p>
            Home address - &pound;4.99 <input type="radio" name="deliveryType" value="home" title="4.99" checked = "checked" />&nbsp; | &nbsp;
            Collect from warehouse - no charge <input type="radio" name="deliveryType" value="trade" title="0" />
            </p>
        </section>

        <section id="checkCost">
            <h2>Total cost</h2>
            Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
        </section>

        <section id="placeOrder">
            <h2>Place order</h2>
            Your details
            Customer Type: <select name="customerType">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

            <p style="color: red; font-weight: bold;">I have read and agree to the terms and conditions
            <input type="checkbox" id="termsChkbx " onchange="isChecked(this,'sub1')"/></p>


            <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
        </section>
    </form>
</div>
</body>
</html>

What is the exact problem? What is the behavior you expect and what is the behavior that happens instead? — nem035
– nem035, Commented Nov 29, 2015 at 3:19
Also, we don't need to see your PHP if it's working fine, just the rendered output. — mpen
– mpen, Commented Nov 29, 2015 at 3:20
Sorry all, I updated the question again. I'm not able to get the total sum of the items selected by the checkbox & the radio box — Doran L
– Doran L, Commented Nov 29, 2015 at 3:24

Anik Islam Abhi · Accepted Answer · 2015-11-29 03:37:00Z

1

$('.chosen') is not checkbox. checkbox is child of .chosen

Try like this

$('.chosen').on("click",function() {
    var chk=$(this).find("input");
    if(chk.is(':checked')) {
        sum = sum + parseInt(chk.val());
    } else {
        sum = sum - parseInt(chk.val());
    }
    $('#total').val(sum);
});

JSFIDDLE

edited Nov 29, 2015 at 3:37

answered Nov 29, 2015 at 3:23

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Doran L Over a year ago

Thanks, it's weird that i can see it work on jsfiddle but not on mine. Does it matter where I place my <script type ='text/javascript"> ?

Anik Islam Abhi Over a year ago

@DoranL it's depend on many things. like dynamic dom , static dom , loadtime etc

SnareChops Over a year ago

@DoranL Most likely it is working in JSFiddle and not on your local instance because you need to wrap your code in the jQuery ready event like this $(document).ready(function(){ /*Place your code here*/ });

Doran L Over a year ago

@SnareChops Thanks, I already did that.. i uploaded my JS on the questions and the only function working is -> function isChecked(checkbox, sub1)

Anik Islam Abhi Over a year ago

@DoranL you don't need mutiple ready event . wrap all method in one ready event and i think you need event delegate.. Try like this $(document).on("click",".chosen",function() instead of $('.chosen').on("click",function()

|

Collectives™ on Stack Overflow

javascript total sum function

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related