How to add Total amount of order form to Shopping cart?

Question

I have prepared online order form for a printing house. In the form everything works smoothly. But I need to put total amount of each order into shopping cart, because someone may want to order several print jobs. I am new in javascript, I tried to do it by the loop, but it adds only once. Any help will be appreciated.

 //calculation script omitted var addToCartButton = document.getElementsByClassName('addToCart') for (var i = 0; i < addToCartButton.length; i++) { var button = addToCartButton[i] button.addEventListener('click', function() { var grandTotal = new Array; grandTotal.push(allTotal) var cartRowContents = '<table><tr><th>Xidmet adi</th><th>Cemi</th></tr>' var buttonClicked = document.getElementById('cartTotal') var serviceName = document.getElementById('service') for (k = 0; k < grandTotal.length; k++) { cartRowContents += '<tr><td>' + serviceName.value + '</td><td>' + grandTotal[k] + '</td></tr>' } buttonClicked.innerHTML = cartRowContents; cartRowContents += '</table>' }) } 

 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Onlayn ödəmə</h4> </div> <div class="modal-body"> <form class="form-payment" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="payment"> <fieldset> <p class="warning" id="warning">Hörmətli müştəri, istəyinizə uyğun sifarişinizi qeyd edin və yekun məbləğin doğruluğundan əmin olduqdan sonra "Təsdiq et" düyməsini sıxın</p> <input type="hidden" name="id" /> <label for="service">Xidmət növü:</label> <select class="form-select" id="service" name="service" onchange="calculateTotal()"> <option value="none" selected disabled>Xidmət növünü seçin</option> <option value='Çap'>Çap</option> <option value='Kserokopiya'>Kserokopiya</option> <option value='Kitab çapı'>Kitab çapı</option> <option value='Diplom və sertifikat çapı'>Diplom və sertifikat çapı</option> <option value='Poster çapı'>Poster çapı</option> <option value='Skan'>Skan </option> <option value='Laminasiya'>Laminasiya</option> <option value='Cildləmə'>Cildləmə</option> </select> <label id="papertypeL" for="papertype">Kağız növü:</label> <select class="form-select" id="papertype" name="papertype" onchange="calculateTotal()"> <option value="none" selected disabled>Kağız növünü seçin</option> <option value='Standart kağız (A4-parlaq)-0.50 AZN'>Standart kağız(A4-parlaq)-0.50 AZN</option> <option value='Premium kağız (A4-parlaq)-1 AZN'>Premium kağız (A4-parlaq)-1 AZN</option> <option value='VİP kağız (A4-Mat)-1.50 AZN'>VİP kağız (A4-Mat)-1.50 AZN</option> </select> <label id="scansizeL" for="scansize">Kağız ölçüsü:</label> <select class="form-select" id="scansize" name="scansize" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A4'>A4</option> <option value='A3'>A3</option> </select> <label id="bookprintL" for="bookprint">Kağız ölçüsü:</label> <select class="form-select" id="bookprint" name="bookprint" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A4'>A4</option> <option value='A5'>A5</option> </select> <label id="postersizeL" for="postersize">Poster ölçüsü:</label> <select class="form-select" id="postersize" name="postersize" onchange="calculateTotal()"> <option value="none" selected disabled>Ölçünü seçin</option> <option value='A3'>A3</option> <option value='A3+'>A3+</option> </select> <label id="posterpaperL" for="posterpaper">Kağız növü:</label> <select class="form-select" id="posterpaper" name="posterpaper" onchange="calculateTotal()"> <option value="none" selected disabled>Kağız növünü seçin</option> <option value='Standart kağız'>Standart kağız</option> <option value='Premium kağız'>Premium kağız</option> <option value='VİP kağız'>VİP kağız</option> </select> <label id="printL" for='print'>Çap növü:</label> <label id="radio" class="container-radio">Ağ-qara <input type="radio" checked="checked" name="capnovu" value="Ağ-qara" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="radio" class="container-radio">Rəngli <input type="radio" name="capnovu" value="Rəngli" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="sideL" for='side'>Üz sayı:</label> <label id="side" class="container-radio">Təküzlü <input type="radio" checked="checked" name="uzsayi" value="Təküzlü" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="side" class="container-radio">İkiüzlü <input type="radio" name="uzsayi" value="İkiüzlü" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="kitab-cildL" class="container-radio" for="kitab-cild">Cildləmə<input id="kitab-cild" type="checkbox" onclick="calculateTotal()" /><span class="checkmark-box"></span></label> <label id="cildL" for="cild">Cildləmə növü:</label> <select class="form-select" id="cild" name="cild" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Kleylə cildləmə'>Kleylə cildləmə</option> </select> <label id="cildA4L" for="cildA4">Cildləmə növü:</label> <select class="form-select" id="cildA4" name="cildA4" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Kleylə cildləmə'>Kleylə cildləmə</option> <option value='Kitab bərpa'>Kitab bərpa</option> <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option> </select> <label id="cildA3L" for="cildA3">Cildləmə növü:</label> <select class="form-select" id="cildA3" name="cildA3" onchange="calculateTotal()"> <option value="none" selected disabled>Cildləmə növünü seçin</option> <option value='Dəmir spiral cildləmə'>Dəmir spiral cildləmə</option> <option value='Plasmas spiral cildləmə'>Plasmas spiral cildləmə</option> <option value='Çubuqla cildləmə'>Çubuqla cildləmə</option> </select> <label id="sayL" for="say">Səhifə Sayı:</label><input id="say" name="say" class="form-input" type="text" value="" onclick="calculateTotal()" /> <label id="nusxeSayL" for="nusxeSay">Nüsxə Sayı:</label><input id="nusxeSay" name="nusxeSay" class="form-input" type="text" value="" onclick="calculateTotal()" /> <label id="laminasiyaL" class="container-radio">Laminasiya olacaq? <input type="checkbox" id="laminasiya" name="checkbox" onclick="calculateTotal()"> <span class="checkmark-box"></span> </label> <label id="deliveryL" class="container-radio">Çatdırılma olacaq? <input type="checkbox" id="delivery" name="checkbox" onclick="calculateTotal()"> <span class="checkmark-box"></span> </label> <label id="deliveryRadio" class="container-radio">Bakıdaxili kuryer ilə (3 AZN) <input type="radio" checked="checked" name="radio" value="kuryer" id="kuryer" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="deliveryRadio" class="container-radio">Bakıdaxili taksi ilə (5 AZN) <input type="radio" name="radio" value="taksi" id="taksi" onclick="calculateTotal()"> <span class="checkmark"></span> </label> <label id="deliveryRadio" class="container-radio">Bölgələrə poçtla (3 AZN) <input type="radio" name="radio" value="poct" id="poct" onclick="calculateTotal()"> <span class="checkmark"></span> </label> </fieldset> </div> <div id="totalPrice" style="padding:10px; font-weight:bold; background-color:#ff0; "> </div> <div id="cartTotal"> <p></p> </div> <div class="modal-footer"> <button type="submit" name="submit" data-dismiss="modal" class="btn btn-default">Təsdiq et</button> <button class="btn btn-default addToCart" id="addToCart" type="submit">Add to Cart</button> </form> </div> 

I want to add variable allTotal into a grandTotal array when addToCart button clicked and then reset the form. It adds the datas but instead of adding new row it replaces the old data.

Answer 1

Well, you are redefining grandTotal each time you click. The following would be better :

var grandTotal = new Array;
for (var i = 0; i < addToCartButton.length; i++) {
    var button = addToCartButton[i]
    button.addEventListener('click', function(){
        grandTotal.push(allTotal)
        var cartRowContents = '<table><tr><th>Xidmet adi</th><th>Cemi</th></tr>'
        var buttonClicked = document.getElementById('cartTotal')
        var serviceName = document.getElementById('service')
        for(k=0;k<grandTotal.length;k++){
            cartRowContents += '<tr><td>' +serviceName.value+'</td><td>' +grandTotal[k]+'</td></tr>' 
        }
        cartRowContents += '</table>';
        buttonClicked.innerHTML = cartRowContents;
    })
}

Do take the time to read about scope in JS, it'll come in handy if you expand your script.