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

Question

我试图制作订单并通过jQuery检查以及计算价格。一切正常。我有它，所以当用户再次输入零（=他不再需要该项目）时，它会重新计算此功能，同时确保没有00001订单通过。

现在问题是我的总价。我无法为作业创建正确的循环。我希望你们中的一些人可以指导我朝着正确的方向前进。

该网站位于：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>

所以现在，总价格显示在弹出窗口中（不起作用），但我确定按钮得到了警报。最好是它位于表格中并自行更新。

Answer 1

点击事件的按钮正在调用函数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＆＃34; + i。

希望这适合你。