所以我有一个小订单，可以正常使用。
我遇到的问题与重置按钮有关。重置按钮会清除所有元素，但表格范围内的 textContent 元素除外。
我尝试过多种组合但没有成功:
document.getElementById("flagTotal").reset();
实现这一目标的最精简方法是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>CHILE PRODUCT ORDER FORM</h1>
<div class="php">
<a href="https://damp-scrubland-86094.herokuapp.com/index.php" target="blank">CLICK HERE FOR CUSTOMER DETAILS FORM</a>
</div>
<form method="post" id="order_form">
<form action="/action_page_post.php" method="post">
<div><label>Name</label><input type="text" id="name" required maxlength=15 minlength=3></div>
<br>
</br></br>
</br></br>
<table>
<tr>
<th>Product</th>
<th>CHILE MEMORABILIA ITEMS</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>FLAG</td>
<td>The country of Chile's flag consists of two unequal horizontal bands of white and red and a blue square the same height as the white band in the canton.</td>
<td>£10.00/Flag</td>
<td><input class="quantity" type="number" id="flag" min="1" max="3" data-cost=10 value=0></input></td>
<td id="flagTotal"></td>
</tr>
<tr>
<td>CHILEAN RIOJA WINE</td>
<td>A powerful wine with raspberry and vanilla flavours. Please note, This is not for the buckfast enthusiasts.</td>
<td>£7.00/Bottle</td>
<td><input class="quantity" type="number" id="wine" min="1" max="3" data-cost=7 value=0></input></td>
<td id="wineTotal"></td>
</tr>
</table>
</br></br>
<h3>Use the dropdown box to select your postage option:</h3>
<p>£1.00 is First Class.</p><span><p>£2.00 in Royal Mail Tracked</p><span><p>£3.00 is Same Day Bicyle Courier</p>
<select id="postage">
<option value="1">1.00</option>
<option value="2">2.00</option>
<option value="3">3.00</option>
</select>
<br>
</form>
<br>
<br>
<input type="submit" onclick="myCalculate()" value="Calculate Total Cost">
<input type="reset" onclick="myFunction()" value="Reset">
<br>
<p> </p>
<br>
<h3><p id="demo"></p></h3>
<script>
function myCalculate() {
var name = document.getElementById("name").value;
var subtotalone = parseInt(document.getElementById("flagTotal").textContent);
var subtotaltwo = parseInt(document.getElementById("wineTotal").textContent);
var postage = parseInt(document.getElementById("postage").value);
var total = + subtotalone + subtotaltwo + postage;
document.getElementById("demo").innerHTML = name + " " + "£" + total + " " + "is your total cost for these items including postage.";
};
function myFunction() {
document.getElementById("order_form").reset();
document.getElementById("flag").reset();
document.getElementById("wine").reset();
document.getElementById("postage").reset();
document.getElementById("flagTotal").innerHTML = "";
};
</script>
Jquery
$("#order_form").submit(function(event){
if(! $("#firstName").val() ){
formSubmissionOK = false;
$("#firstNameError").text("Error: You have submited without inputting your name.");
}
if(formSubmissionOK == false){
event.preventDefault();
}
});
$("#flag").change(function(){
var productCost = $(this).data("cost");
var subtotal = productCost * $(this).val();
$("#flagTotal").text(subtotal);
});
$("#wine").change(function(){
var productCost = $(this).data("cost");
var subtotal = productCost * $(this).val();
$("#wineTotal").text(subtotal);
});
最佳答案
已更新
参见步骤#6
- 您有 2
<form>标签和一个结束语</form>标签，所以我删除了其中一个。 - 添加了此内容:
form="order_form"到submit和reset纽扣。这会将按钮关联到 #id 为"order_form"的表单。 - 已删除
myFunction()因为正确设置后，reset按钮将默认重置表单字段。 -
<input>标签没有结束标签 -
<br>或<br/>不是</br> - 已添加
<output>发送至<td>并交换了 id。它们取代了<td>对于小计功能，它们是受reset影响的表单字段
代码片段
$("#order_form").submit(function(event) {
if (!$("#firstName").val()) {
formSubmissionOK = false;
$("#firstNameError").text("Error: You have submited without inputting your name.");
}
if (formSubmissionOK == false) {
event.preventDefault();
}
});
$("#flag").change(function() {
var productCost = $(this).data("cost");
var subtotal = productCost * $(this).val();
$("#flagTotal").text(subtotal);
});
$("#wine").change(function() {
var productCost = $(this).data("cost");
var subtotal = productCost * $(this).val();
$("#wineTotal").text(subtotal);
});
// Simply resetting the form does not revert custom DOM manipulation.
$("#order_form").on('reset', function(event) {
$("#flagTotal, #wineTotal").text(''); // Clear the subtotal text.
});
function myCalculate() {
var name = document.getElementById("name").value;
var subtotalone = parseInt(document.getElementById("flagTotal").textContent);
var subtotaltwo = parseInt(document.getElementById("wineTotal").textContent);
var postage = parseInt(document.getElementById("postage").value);
var total = +subtotalone + subtotaltwo + postage;
document.getElementById("demo").innerHTML = name + " " + "£" + total + " " + "is your total cost for these items including postage.";
};form * {
font: inherit
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Order Form</title>
<h1>CHILE PRODUCT ORDER FORM</h1>
<div class="php">
<a href="https://damp-scrubland-86094.herokuapp.com/index.php" target="blank">CLICK HERE FOR CUSTOMER DETAILS FORM</a>
</div>
<form id="order_form" action="/action_page_post.php" method="post">
<div><label>Name</label><input type="text" id="name" required maxlength=15 minlength=3></div>
<br><br><br><br><br>
<table>
<tr>
<th>Product</th>
<th>CHILE MEMORABILIA ITEMS</th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>FLAG</td>
<td>The country of Chile's flag consists of two unequal horizontal bands of white and red and a blue square the same height as the white band in the canton.</td>
<td>£10.00/Flag</td>
<td><input class="quantity" type="number" id="flag" min="1" max="3" data-cost=10 value=0>
</td>
<td><output id="flagTotal"></output></td>
</tr>
<tr>
<td>CHILEAN RIOJA WINE</td>
<td>A powerful wine with raspberry and vanilla flavours. Please note, This is not for the buckfast enthusiasts.</td>
<td>£7.00/Bottle</td>
<td><input class="quantity" type="number" id="wine" min="1" max="3" data-cost=7 value=0>
</td>
<td><output id="wineTotal"></output></td>
</tr>
</table>
<br><br>
<h3>Use the dropdown box to select your postage option:</h3>
<p>£1.00 is First Class.</p>
<p>£2.00 in Royal Mail Tracked</p>
<p>£3.00 is Same Day Bicyle Courier</p>
<select id="postage">
<option value="1">1.00</option>
<option value="2">2.00</option>
<option value="3">3.00</option>
</select>
<br>
</form>
<br><br>
<input type="submit" onclick="myCalculate()" value="Calculate Total Cost" form="order_form">
<input type="reset" form="order_form">
<br>
<p> </p><br>
<h3>
<p id="demo"></p>
</h3>关于javascript - 重置 td 的文本内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43375228/