我试图将用户在 html 表单中的输入添加到一个表中，该表将同一页面中所有产品的总价格相加，所有这些都无需重新加载。
这是我的 html 表单和表格代码
提前谢谢
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>
最佳答案
这是对现有功能的简单更新。您的问题的一部分是避免页面重新加载，因此您会注意到 FORM 不再执行 POST 操作，并且您的 SUBMIT BUTTON 不再是输入，而是带有 onClick 操作的标准按钮。这将允许一切执行而无需离开页面。为了节省时间，我将结果添加到一个单独的表中，您可以随意设置您想要的样式。
<html>
<head>
<title>Order</title>
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}
</script>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
</body></html>
关于javascript - 将表单中的输入添加到同一页面中的表中，无需重新加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19698769/