為什么按下按鈕時頁面會重新加載
[英]Why does the page reload when the button is pressed
問題描述
我有一個帶有數據列表的輸入文本字段。 Datalist 數據來自數據庫。 輸入字段是使用 javascript 動態生成的，如果我使用按鈕將輸入字段的值傳輸到 textarea 字段，頁面正在重新加載，我不知道為什么。
如果有人可以幫助我，那就太好了:)
這是第 10 行按鈕的片段：
<button class="button3" style="width:185px;" onclick="artikeleinfuegen()">Artikel übernehmen</button>
這是功能：
function artikeleinfuegen() {
var x = document.getElementById("artikelsuche").value;
document.getElementById("artikelbeschreibung[]").innerHTML = x;
}
這是整個腳本。
var steuer = '19,00';
function O(id) {
return document.getElementById(id)
}
function insertPos() {
pos = '<table><tr>';
pos += '<td valign=top style="width:100px;"><input type=text name="anz[]" value="1" size=4 onKeyUp="calculate()" /></td>';
pos += '<td valign=top style="width:100px;"><select name="einheit[]"><option value="Lfm.">Lfm.</option><option value="Pal.">Pal.</option><option value="pschl.">pschl.</option><option value="Pkg.">Pkg.</option><option value="Std.">Std.</option><option value="Stk.">Stk.</option> size=4 onKeyUp="calculate()" /></td>';
pos += '<td valign=top><input type="text" list="artikelliste" name="artikelsuche" id="artikelsuche" autocomplete="off" placeholder="Artikelsuche" style="width:700px;"><button class="button3" style="width:185px;" onclick="artikeleinfuegen()">Artikel übernehmen</button><br><textarea style="width:900px;" rows=7 name=dsc[] id=artikelbeschreibung[] onKeyUp="typeAhead(event, this)"></textarea></td>';
pos += '<td valign=top style="width:100px;"><input type=text name="ep[]" value="" size=4 onKeyUp="calculate()" /></td>';
pos += '<td valign=top style="width:100px;"><input type=text name="poserab[]" value="0" size=4 onKeyUp="calculate()" /></td>';
pos += '<td valign=top style="width:100px;"><input type=text name="posprab[]" value="1" size=4 onKeyUp="calculate()" /></td>';
pos += '<td valign=top><input style="color:red;" type=button name="del[]" value=" X " onclick="deletePos(this);"/></td>';
pos += '</tr></table>';
obj = document.createElement("DIV");
obj.innerHTML = pos;
O("docpos").appendChild(obj);
a_anz = document.getElementsByName("anz[]");
a_anz[a_anz.length - 1].focus()
}
function Rabatt() {
return '<div class="column1">Gesamtrabatt €<input type=text name="geserab" value="0" size=4 onKeyUp="calculate()"></div><div class="column1">Gesamtrabatt %<input type=text name="gesprab" value="1" size=4 onKeyUp="calculate()"></div>';
}
function deletePos(obj) {
O("docpos").removeChild(obj.parentNode.parentNode.parentNode.parentNode.parentNode);
calculate()
}
function calculate() {
a_anz = document.getElementsByName("anz[]");
a_ep = document.getElementsByName("ep[]");
a_poserab = document.getElementsByName("poserab[]");
a_posprab = document.getElementsByName("posprab[]");
b_geserab = document.getElementsByName("geserab");
b_gesprab = document.getElementsByName("gesprab");
sum = 0;
for (f = 0; f < a_anz.length; f++) {
menge = parseFloat(a_anz[f].value.replace(/,/, "."));
preis = parseFloat(a_ep[f].value.replace(/,/, "."));
postenrabatteuro = parseFloat(a_poserab[f].value.replace(/,/, "."));
postenrabattprozent = parseFloat(a_posprab[f].value.replace(/,/, "."));
if (!(isNaN(menge) || isNaN(preis))) sum = sum + (((menge * preis) - (menge * postenrabatteuro)) * postenrabattprozent)
}
gesamtrabatteuro = parseFloat(b_geserab[0].value.replace(/,/, "."));
gesamtrabattprozent = parseFloat(b_gesprab[0].value.replace(/,/, "."));
mwst = parseFloat(steuer.replace(/,/, "."));
st = sum * mwst / 100;
gr = (sum * gesamtrabattprozent - gesamtrabatteuro) - sum;
nettoabzug = sum + gr;
total = sum + st;
O("netto").value = sum.toFixed(2).toString().replace(/\./, ",") + " €";
O("gr").value = gr.toFixed(2).toString().replace(/\./, ",") + " €";
O("nettoabzug").value = nettoabzug.toFixed(2).toString().replace(/\./, ",") + " €";
O("steuer").value = st.toFixed(2).toString().replace(/\./, ",") + " €";
O("brutto").value = total.toFixed(2).toString().replace(/\./, ",") + " €"
}
function artikeleinfuegen() {
var x = document.getElementById("artikelsuche").value;
document.getElementById("artikelbeschreibung[]").innerHTML = x;
}
編輯：
我知道這不是你見過的最好的劇本。 我在過去 4 周內學習 JS 和 PHP，我正在盡我所能。
這是整個 html/php 代碼
<?php
include '../../inc/header.php';
include '../../inc/nav.php';
?>
<link rel="stylesheet" href="../../css/angebot.css" type="text/css">
<style>
textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
<script src="../../js/angebot_erstellen.js"></script>
<section>
<h1>Angebot erstellen</h1>
<?php
if(isset($_POST["angebot-erstellen"])){
//Datenbank-Verbindung herstellen
include '../../inc/connect.php';
//Nutzereingabe aus Angebotposition in Variablen speichern
$kunde = $_POST["kunde"];
$anrede = $_POST["anrede"];
$datum = $_POST["datum"];
$referenz = $_POST["referenz"];
$zahlungsbedingungen = $_POST["zahlungsbedingungen"];
$netto = $_POST["netto"];
$mwst = $_POST["mwst"];
$brutto = $_POST["brutto"];
$pos1anz = $_POST['anz'][0];
$pos1einheit = $_POST['einheit'][0];
$pos1dsc = $_POST['dsc'][0];
$pos1ep = $_POST['ep'][0];
$pos1rab = $_POST['posrab'][0];
$pos2anz = $_POST['anz'][1];
$pos2einheit = $_POST['einheit'][1];
$pos2dsc = $_POST['dsc'][1];
$pos2ep = $_POST['ep'][1];
$pos2rab = $_POST['posrab'][1];
// 3. String für SQL-Anweisung erstellen
$insertString = "INSERT INTO angebote (kunde, anrede, datum, referenz, zahlungsbedingungen, netto, mwst, brutto, pos1anz, pos1einheit, pos1dsc, pos1ep, pos1rab, pos2anz, pos2einheit, pos2dsc, pos2ep, pos2rab)
VALUES ('$kunde', '$anrede', '$datum', '$referenz', '$zahlungsbedingungen', '$netto', '$mwst', '$brutto', '$pos1anz', '$pos1einheit', '$pos1dsc', '$pos1ep', '$pos1rab', '$pos2anz', '$pos2einheit', '$pos2dsc', '$pos2ep', '$pos2rab');";
// SQL-Anweisung durchfuehren
$check = mysqli_query($connect, $insertString);
if($check) {
echo '<span style="color: green;" /><strong>Angebot erfolgreich erstellt</strong></span>';
}}
// Hier wird der Kunde ausgegeben, welcher zuvor ausgewählt wurde.
// Kundenauswahl Verarbeitung
// 1. Verbindung zur Datenbank herstellen
include '../../inc/connect.php';
// 2. Prüfe Radio-Button-Auswahl
if(isset($_GET["auswahl"])){
// 3. Datenbankabfrage starten
$id = $_GET["auswahl"];
$abfrage = "SELECT * FROM kunden WHERE id = $id";
$result = mysqli_query($connect, $abfrage);
// 4. Datensatz in Variablen speichern
$kdata = mysqli_fetch_assoc($result);
$firma = $kdata["firma"];
$anrede = $kdata["anrede"];
$vorname = $kdata["vorname"];
$nachname = $kdata["nachname"];
$strasse = $kdata["strasse"];
$plz = $kdata["plz"];
$ort = $kdata["ort"];
}
// 5. Das Bearbeiten-Formular anzeigen
echo "<form action='angebot_erstellen.php' method='post'>";
echo "<div class='column3'>";
echo "<input name='id' type='hidden' value='$id'>";
echo "<textarea name='kunde' rows='10' cols='30'>$firma\n$vorname $nachname\n$strasse\n$plz $ort</textarea>";
echo "</div>";
// Hier wird die Artikelsuche ausgegeben
// 1. Artikeldaten Abfrage
$abfrageartikelsuche = "select artikelname from artikel";
$resultartikelsuche = mysqli_query($connect, $abfrageartikelsuche) or die("Error " . mysqli_error($connect));
?>
<!-- Artikelsuche -->
<datalist id="artikelliste">
<?php while($row = mysqli_fetch_array($resultartikelsuche)) { ?>
<option value="<?php echo $row['artikelname']; ?>"><?php echo $row['artikelname']; ?></option>
<?php } ?>
</datalist>
<?php mysqli_close($connect); ?>
<!-- Obere Eingabemaske -->
<div class="column3">
<textarea name="anrede" id="anrede" rows="10" cols="30" placeholder="Anrede"/></textarea>
</div>
<div class="column3">
<input type="date" name="datum" value="<?php echo date('Y-m-d'); ?>"/>
<input type="text" disabled name="angebotid" placeholder="Angebotsnummer (wird automatisch vergeben)"/>
<input type="text" name="referenz" placeholder="Referenz"/>
</div>
<!-- Hier beginnt die Angebotsbearbeitung fŸr Positionen -->
<!-- Positionen -->
<div id="docpos">
<table class="plist" style="font-size:10px;">
<tbody><tr>
<th style="width:100px;">Menge</th>
<th style="width:100px;border-left:1px solid grey;">Einheit</th>
<th style="width:900px;border-left:1px solid grey;">Beschreibung</th>
<th style="width:100px;border-left:1px solid grey;">EP Netto</th>
<th style="width:100px;border-left:1px solid grey;">Pos. Rabatt €</th>
<th style="width:100px;border-left:1px solid grey;">Pos. Rabatt %</th>
<th> </th>
</tr>
</tbody></table></div>
<input type="button" class="button2" name="newpos" style="float:right; clear:both;margin-right:25px;" value="Position erstellen" onclick="insertPos()">
<div class="column70">
<div class="column50">
<textarea name="zahlungsbedingungen" id="zahlungsbedingungen" rows="10" cols="30" placeholder="Zahlungsbedingungen"></textarea>
</div>
<div class="column50">
<select name="gesamtrabatt" id="gesamtrabatt">
<option value="Rabatt">Rabatt</option>
<option value="Nachlass">Nachlass</option>
</select>
<div id="rabatt"></div>
<script> document.getElementById("rabatt").innerHTML = Rabatt(); </script>
</div>
<input class="button" type="submit" name="angebot-erstellen" value="Angebot erstellen">
</div>
<div class="column30">
<div style="width:100%;border: #4B9F93 1px solid;border-bottom:2px solid #F39200;"><br>
<label> Summe Netto:</label><input type="text" name="netto" id="netto" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br>
<label> Rabatt / Nachlass:</label><input type="text" name="gr" id="gr" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br>
<label> Summe Netto nach Abzug:</label><input type="text" name="nettoabzug" id="nettoabzug" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br>
<label> MwSt 19,00%:</label><input type="text" name="mwst" id="steuer" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br>
<label style="font-weight:bold;"> Gesamt Brutto:</label><input type="text" name="brutto" id="brutto" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;font-weight:bold;" tabindex="32000">
</div>
</div>
</form>
</section>
<?php
include '../../inc/footer.php';
?>
</body>
</html>
1 個解決方案
解決方案1
0 已采納 2020-11-19 13:49:05
- 添加了將金額切換為 JS 金額的代碼
- 使用 tbody 的第一行作為模板
- 計算時循環遍歷行
- 刪除了所有內聯事件處理程序
注意我刪除了日期 PHP - 您可以再次插入
我也找不到你的 typeAhead 函數。 請用你的替換我的
function typeAhead(e,tgt) { console.log(tgt.value) }; // missing function const toNum = str => { let num = str.replace(/,/, "."); return isNaN(num) || num.trim() === "" ? 0 : +num; } const toAmount = num => num.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }) const steuer = '19,00'; const mwst = toNum(steuer); let container, nettoField, grField, nettoabzugField, steuerField, bruttoField, geserabField, gesprabField; window.addEventListener("load", function() { container = document.getElementById("docpos"); nettoField = document.getElementById("netto"); grField = document.getElementById("gr"); nettoabzugField = document.getElementById("nettoabzug"); steuerField = document.getElementById("steuer"); bruttoField = document.getElementById("brutto"); geserabField = document.querySelector("[name=geserab]"); gesprabField = document.querySelector("[name=gesprab]"); container.addEventListener("click", function(e) { const tgt = e.target; const parent = tgt.closest("tr"); if (tgt.classList.contains("button3")) { const x = parent.querySelector("[name=artikelsuche]").value; parent.querySelector(".artikelbeschreibung").value = x; } else if (tgt.classList.contains("del")) { tgt.closest("tr").remove(); calculate() } }) container.addEventListener("input", calculate); geserabField.addEventListener("input", calculate); gesprabField.addEventListener("input", calculate); container.addEventListener("keyup", function(e) { const tgt = e.target; if (tgt.classList.contains("artikelbeschreibung")) { typeAhead(e, tgt); } }) document.querySelector(".button2").addEventListener("click", insertPos); }) function insertPos() { const newTr = container.querySelector("tr").cloneNode(true); [...newTr.querySelectorAll("input, textarea")].forEach(inp => inp.value=""); newTr.querySelector(".anz").value=1; container.appendChild(newTr); newTr.querySelector(".anz").focus(); } function calculate() { const gesamtrabatteuro = toNum(document.querySelector("[name=geserab]").value); const gesamtrabattprozent = toNum(document.querySelector("[name=gesprab]").value); let sum = 0; [...container.querySelectorAll("tr")].forEach(row => { const postenrabatteuro = toNum(row.querySelector(".poserab").value); const postenrabattprozent = toNum(row.querySelector(".posprab").value); const preis = toNum(row.querySelector(".ep").value); const menge = toNum(row.querySelector(".anz").value); sum += (((menge * preis) - (menge * postenrabatteuro)) * postenrabattprozent) }); let st = sum * mwst / 100; let gr = (sum * gesamtrabattprozent - gesamtrabatteuro) - sum; let nettoabzug = sum + gr; total = sum + st; nettoField.value = toAmount(sum); grField.value = toAmount(gr); nettoabzugField.value = toAmount(nettoabzug); steuerField.value = toAmount(st); bruttoField.value = toAmount(total); }
#docpos>tr:first-child .del { display: none; } textarea { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
<datalist id="artikelliste"> <option value="Name1">Name1</option> </datalist> <!-- Obere Eingabemaske --> <div class="column3"> <textarea name="anrede" id="anrede" rows="10" cols="30" placeholder="Anrede" /></textarea> </div> <div class="column3"> <input type="date" name="datum" value="" /> <input type="text" disabled name="angebotid" placeholder="Angebotsnummer (wird automatisch vergeben)" /> <input type="text" name="referenz" placeholder="Referenz" /> </div> <!-- Hier beginnt die Angebotsbearbeitung für Positionen --> <!-- Positionen --> <div> <table class="plist" style="font-size:10px;"> <thead> <tr> <th style="width:100px;">Menge</th> <th style="width:100px;border-left:1px solid grey;">Einheit</th> <th style="width:900px;border-left:1px solid grey;">Beschreibung</th> <th style="width:100px;border-left:1px solid grey;">EP Netto</th> <th style="width:100px;border-left:1px solid grey;">Pos. Rabatt €</th> <th style="width:100px;border-left:1px solid grey;">Pos. Rabatt %</th> <th> </th> </tr> </thead> <tbody id="docpos"> <tr> <td valign=top style="width:100px;"><input type=text class="anz" name="anz[]" value="1" size="4" /></td> <td valign=top style="width:100px;"> <select name="einheit[]"> <option value="Lfm.">Lfm.</option> <option value="Pal.">Pal.</option> <option value="pschl.">pschl.</option> <option value="Pkg.">Pkg.</option> <option value="Std.">Std.</option> <option value="Stk.">Stk.</option> </select> </td> <td valign=top><input type="text" list="artikelliste" name="artikelsuche" autocomplete="off" placeholder="Artikelsuche" style="width:700px;"> <button type="button" class="button3" style="width:185px;">Artikel übernehmen</button><br> <textarea style="width:900px;" rows=7 name=dsc[] class="artikelbeschreibung"></textarea> </td> <td valign=top style="width:100px;"><input type=text class="ep" name="ep[]" value="" size="4" /></td> <td valign=top style="width:100px;"><input type=text class="poserab" name="poserab[]" value="0" size="4" /></td> <td valign=top style="width:100px;"><input type=text class="posprab" name="posprab[]" value="1" size="4" /></td> <td valign=top><input style="color:red;" type=button class="del" name="del[]" value=" X " /></td> </tr> </tbody> </table> </div> <input type="button" class="button2" name="newpos" style="float:right; clear:both;margin-right:25px;" value="Position erstellen"> <div class="column70"> <div class="column50"> <textarea name="zahlungsbedingungen" id="zahlungsbedingungen" rows="10" cols="30" placeholder="Zahlungsbedingungen"></textarea> </div> <div class="column50"> <select name="gesamtrabatt" id="gesamtrabatt"> <option value="Rabatt">Rabatt</option> <option value="Nachlass">Nachlass</option> </select> <div id="rabatt"> <div class="column1">Gesamtrabatt €<input type=text name="geserab" value="0" size="4"></div> <div class="column1">Gesamtrabatt %<input type=text name="gesprab" value="1" size="4"></div> </div> </div> <input class="button" type="submit" name="angebot-erstellen" value="Angebot erstellen"> </div> <div class="column30"> <div style="width:100%;border: #4B9F93 1px solid;border-bottom:2px solid #F39200;"><br> <label> Summe Netto:</label><input type="text" name="netto" id="netto" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br> <label> Rabatt / Nachlass:</label><input type="text" name="gr" id="gr" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br> <label> Summe Netto nach Abzug:</label><input type="text" name="nettoabzug" id="nettoabzug" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br> <label> MwSt 19,00%:</label><input type="text" name="mwst" id="steuer" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;" tabindex="32000"><br> <label style="font-weight:bold;"> Gesamt Brutto:</label><input type="text" name="brutto" id="brutto" value="" readonly="" style="border:none;background-color:transparent;width:60%;text-align:left;font-weight:bold;" tabindex="32000"> </div> </div> </form> </section>
按下按鈕后如何重新加載頁面？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.