расчет общей стоимости заказа в jquery или javascript

Я попытался сделать бланк заказа и получить его проверку jQuery, а также рассчитать цены. все работает нормально. У меня это есть, когда пользователь снова ставит ноль (= он больше не хочет этот элемент), он пересчитывает эту функцию, также гарантирует, что никакие заказы 00001 не пройдут.расчет общей стоимости заказа в jquery или javascript

Теперь проблема в моей общей цене. Я не смог создать правильный цикл для задания. Я надеюсь, что некоторые из вас помогут мне в правильном направлении.

Сайт находится здесь: 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 ((("").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>

Так что сейчас общая цена отображается в виде всплывающего (не работает), но тогда я был уверен, кнопка получила свое предупреждение. Предпочтительно он будет располагаться в таблице и обновляться самостоятельно.

источник

2014-12-21 Jamie Goegebeur

@ axel.michel на стороне сервера вы имеете в виду PHP? Я понимаю, некоторые PHP, но как бы я сделать его мгновенное обновляемое? –

Событие на клике вызывало функцию totaal(). Однако я мог бы найти еще одну функцию myFunction(), выполняющую некоторую работу по суммированию значений. Я думаю, что вам нужно, это функция, как это:

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

Обратите внимание, что поскольку вы пытаетесь получить значение из всех 16 текстовых полей итеративно, вызов document.getElementById необходимо передать значение как: subtotaal "+ я.

Надеется, что это работает для вас.

источник

2014-12-21 14:31:44 sriniprash

Спасибо за быстрое реагирование и извините за эту ошибку. Я обманывал код и не читал код, но я сразу же рассмотрю эту функцию: D –

A и да, это был мой старый код, но это печально не работало для меня. Я включил функцию предупреждения только для того, чтобы получить некоторую конфермацию при тестировании –

расчет общей стоимости заказа в jquery или javascript

ответ

Смежные вопросы