从jquery或javascript中的订单中计算总价格

Question

I have tried to make a order form and get it checked by jQuery as well as calculating the prices. everything works fine. I have it so when the user puts in a zero again (= he doesn't want the item anymore) it recalculates this function also makes sure no 00001 orders go trough.

Now the problem is my total price. I haven't been able to create the correct loop for the job. I hope some of you can guide me in the right direction.

The site is located here: caferene

 function productprijs(prijs, myfield, targetfield) { prijs = prijs.replace(",", "."); aantal = myfield.value; // if (aantal != "") { //kijken als het eerste cijfer een 0 is if (aantal.substr(0, 1) == "0") { //als lengte = 1 is gewoon veranderen in een 1, anders de 0 weglaten if (aantal.length == 1) { aantal = "0"; } else { aantal = aantal.substr(1, (aantal.length - 1)); } myfield.value = aantal; } // subtotaal = parseFloat(prijs) * parseInt(aantal); subtotaal = Math.round(subtotaal * 100) / 100; subtotaal = subtotaal.toString(); posPunt = subtotaal.lastIndexOf("."); // if (posPunt == -1) { subtotaal = subtotaal + ".00"; } else { naPunt = subtotaal.substr(posPunt + 1, (subtotaal.length - 1)); if (naPunt.length == 1) { subtotaal = subtotaal + "0"; } } subtotaal = subtotaal.replace(".", ","); // document.getElementById(targetfield).innerHTML = subtotaal; // } myFunction; } function myFunction() { totaalPrijs = 0; aantalProd = parseInt(document.getElementById("aantalProducten").value); for (var i = -1; i < aantalProd; i++) { subPrijs = document.getElementById("subtotaal1").innerHTML; if (subPrijs != "") { totaalPrijs += parseFloat(subPrijs.replace(",", ".")); alert("€" + totaalPrijs); } } } function numbersonly(myfield, e) { var key; var keychar; if (window.event) { key = window.event.keyCode; } else if (e) { key = e.which; } else { return true; } keychar = String.fromCharCode(key); // pijltjes, backspace, tab, mogen wel ingedrukt worden if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) { return true; } else if ((("0123456789").indexOf(keychar) > -1)) { return true; } else { return false; } } function checkProdForm(myForm) { // var bIsValid = true; // // datum if (document.getElementById("afhaling_datum").value == "dd/mm/yyyy" || document.getElementById("afhaling_datum").value == "") { bIsValid = false; document.getElementById("resp").innerHTML = "Gelieve een correcte datum in te vullen"; document.getElementById("resp").style.display = "block"; } if (document.getElementById("totaal").innerHTML == "0,00") { bIsValid = false; document.getElementById("resp").innerHTML = "Gelieve minstens 1 product te selecteren"; document.getElementById("resp").style.display = "block"; } // if (bIsValid) { document.getElementById("resp").innerHTML = ""; document.getElementById("resp").style.display = "none"; } // return bIsValid; // } 

 body { padding-top: 120px; padding-left: 20%; width: 80%; } .titel { background-color: #408CAE; } #rij1 { background-color: #D7EFFA } #rij2 { background-color: #F2F4F5 } .bedrag .aantal. { width: 4%; } .prijs { width: 9%; } .opties { width: 9%; } .titelbeschrijving { width: 60%; } .comments { width: 170px; height: 180px; border: 1px solid #999999; padding: 5px; } .gegevens td { padding: 3px; } 

 <section id="bestellen" class="bestellen"> <form form action="bestellen.php" method="GET" onsubmit="return checkProdForm(this)"> <table cellpadding="0" cellspacing="0" border="0" id="prodtabel"> <tbody id="tabel"> <tr class="titel" id="oesters"> <td class="titelbeschrijving">Oesters</td> <td class="opties">opties</td> <td class="prijs">prijs</td> <td class="aantal">aantal</td> <td class="bedrag">bedrag</td> </tr> <tr class="prod0" id="rij1"> <td class="beschrijving">speciales Gillardeau</td> <td> <select name="extra0" id="extra0"> <option selected="selcted" value="gekraakt">gekraakt</option> <option value="niet-gekraakt">niet-gekraakt</option> </select> </td> <td>€3/stuk</td> <td> <input type="text" name="art0" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('3', this, 'subtotaal0')" style="width:50px"> </td> <td id='subtotaal0'>0,00</td> </tr> <tr class="prod1" id="rij2"> <td class="beschrijving">Oosterschelde Creuses</td> <td> <select name="extra1" id="extra0"> <option value="gekraakt">gekraakt</option> <option value="niet-gekraakt">niet-gekraakt</option> </select> <td>€2/stuk</td> <td> <input type="text" name="art1" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('2', this, 'subtotaal1')" style="width:50px"> </td> <td id='subtotaal1'>0,00</td> </tr> <tr class="prod2" id="rij1"> <td class="beschrijving">Zeeuwse platte oesters</td> <td> <select name="extra2" id="extra0"> <option value="gekraakt">gekraakt</option> <option value="niet-gekraakt">niet-gekraakt</option> </select> </td> <td>€3/stuk</td> <td> <input type="text" name="art2" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('3', this, 'subtotaal2')" style="width:50px"> </td> <td id='subtotaal2'>0,00</td> </tr> <tr class="prod3 id=" rij2 ""> <td class="beschrijving">Ierlands Creuses</td> <td> <select name="extra3" id="extra0"> <option value="gekraakt">gekraakt</option> <option value="niet-gekraakt">niet-gekraakt</option> </select> </td> <td>€3/Stuk</td> <td> <input type="text" name="art3" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('3', this, 'subtotaal3')" style="width:50px"> </td> <td id='subtotaal3'>0,00</td> </tr> <tr class="titel" id="seafood"> <td class="titelbeschrijving" width="30%">SEA FOOD</td> <td width="15%">opties</td> <td width="11%">prijs</td> <td width="11%">aantal</td> <td width="11%">bedrag</td> </tr> <tr class="prod4" id="rij1"> <td class="beschrijving">Wilde zalm gerookt met de hand gesneden</td> <td> </td> <td>€10/100gram</td> <td> <input type="text" name="art4" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('10', this, 'subtotaal4')" style="width:50px"> </td> <td id='subtotaal4'>0,00</td> </tr> <tr class="prod5" id="rij2"> <td class="beschrijving">Wulken</td> <td> </td> <td>€3/100gram</td> <td> <input type="text" name="art5" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('3', this, 'subtotaal5')" style="width:50px"> </td> <td id='subtotaal5'>0,00</td> </tr> <tr class="prod6" id="rij1"> <td class="beschrijving">Kreukels</td> <td> </td> <td>€3/100gram</td> <td> <input type="text" name="art6" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('3', this, 'subtotaal6')" style="width:50px"> </td> <td id='subtotaal6'>0,00</td> </tr> <tr class="prod7" id="rij2"> <td class="beschrijving">Ongepelde Zeebrugse garnalen</td> <td> </td> <td>€2/100gram</td> <td> <input type="text" name="art7" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('2', this, 'subtotaal7')" style="width:50px"> </td> <td id='subtotaal7'>0,00</td> </tr> <tr class="titel" id="Kreeft"> <td class="titelbeschrijving" width="30%">Kreeft & Langoustines</td> <td width="15%">opties</td> <td width="11%">prijs</td> <td width="11%">aantal</td> <td width="11%">bedrag</td> </tr> <tr class="prod9" id="rij1"> <td class="beschrijving">Kreeft in kruidenboter klaar voor de oven</td> <td> </td> <td>600 gram €28</td> <td> <input type="text" name="art8" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('28', this, 'subtotaal9')" style="width:50px"> </td> <td id='subtotaal9'>0,00</td> </tr> <tr class="prod10" id="rij2"> <td class="beschrijving">Kreeft in bouillon gekookt met garnituur</td> <td> </td> <td>600 gram €28</td> <td> <input type="text" name="art9" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('28', this, 'subtotaal10')" style="width:50px"> </td> <td id='subtotaal10'>0,00</td> </tr> <tr class="prod11" id="rij1"> <td class="beschrijving">Langoustines met kruiden boter klaar voor de oven</td> <td> </td> <td>4 stuks €28</td> <td> <input type="text" name="art10" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('28', this, 'subtotaal11')" style="width:50px"> </td> <td id='subtotaal11'>0,00</td> </tr> <tr class="titel" id="sugessties"> <td class="titelbeschrijving" width="30%">Suggestie</td> <td width="15%">opties</td> <td width="11%">prijs</td> <td width="11%">aantal</td> <td width="11%">bedrag</td> </tr> <tr class="prod112" id="rij1"> <td class="beschrijving">Plateau fruits de mer per twee personen: 3 maal 4 oesters, 2wulken, 2kreukels, 2ongepelde garnalen, 4 langoustines, 1 kreeft</td> <td> </td> <td>per twee personen €84</td> <td> <input type="text" name="art11" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('84', this, 'subtotaal12')" style="width:50px"> </td> <td id='subtotaal12'>0,00</td> </tr> <tr class="titel" id="champagne"> <td class="titelbeschrijving" width="30%">Chamapgne & Wijn</td> <td width="15%">opties</td> <td width="11%">prijs</td> <td width="11%">aantal</td> <td width="11%">bedrag</td> </tr> <tr class="prod13" id="rij1"> <td class="beschrijving">Champagne Ruinard</td> <td> </td> <td>€38/fles</td> <td> <input type="text" name="art12" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('38', this, 'subtotaal13')" style="width:50px"> </td> <td id='subtotaal13'>0,00</td> </tr> <tr class="prod14" id="rij2"> <td class="beschrijving">Champagne Laurenti</td> <td> </td> <td>€21/fles</td> <td> <input type="text" name="art13" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('21', this, 'subtotaal14')" style="width:50px"> </td> <td id='subtotaal14'>0,00</td> </tr> <tr class="prod15" id="rij1"> <td class="beschrijving">Blanquette de Limoux LeMoulin</td> <td> </td> <td>€15/fles</td> <td> <input type="text" name="art14" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('15', this, 'subtotaal15')" style="width:50px"> </td> <td id='subtotaal15'>0,00</td> </tr> <tr class="prod16" id="rij2"> <td class="beschrijving">Vedejo José Pariente</td> <td> </td> <td>€15/fles</td> <td> <input type="text" name="art15" id="art0" onkeypress="return numbersonly(this, event)" onkeyup="productprijs('15', this, 'subtotaal16')" style="width:50px"> </td> <td id='subtotaal16'>0,00</td> </tr> </tbody> </table> <br> <br> <table class="gegevens"> <tr> <td>naam:</td> <td> <input type='text' name='naam'> </td> </tr> <tr> <td>telefoonnummer:</td> <td> <input type="tel" name="tel"> </td> </tr> <tr> <td>email:</td> <td> <input type="email" name="email"> </td> </tr> <tr> <td>datum:</td> <td> <input type="date" name="datum"> </td> </tr> <tr> <td>tijdstip</td> <td> <input type="time" name="tijd"> </td> </tr> <tr> </tr> <tr> <td>extra:</td> <td> <textarea name="textarea" style="width:250px;height:150px;"></textarea> </td> </tr> </table> <input type="submit" value="Ga verder"> <div id="resp" class="resp"></div> </form> <input type="hidden" name="aantalProducten" id="aantalProducten" value="16"> <p>click this for a total</p> <button onclick="totaal()">Try</button> <br> <br> <br> </div> </section> 

So for now, the total price is displayed in a pop up (doesn't work), but then I was sure the button got its alert. Preferably it would be located in the table and updated on its own.

Answer 1

The button's on click event was calling a function totaal(). I could however find another function myFunction() doing some job of totalling the values. I think what you need is a function like this:

function totaal() {
  totaalPrijs = 0;

  aantalProd = parseInt(document.getElementById("aantalProducten").value);
  for (var i = 0; i < aantalProd; i++) {
    subPrijs = document.getElementById("subtotaal" + i).innerHTML;
    if (subPrijs != "") {
      totaalPrijs += parseFloat(subPrijs.replace(",", "."));
      alert("€" + totaalPrijs);
    }
  }
}

Note that since you are trying to get the value from all the 16 text fields iteratively, the document.getElementById call needs to be passed a value like: subtotaal" + i.

Hope this works for you.