重置td的文本内容

Question

So I have a little order form which is working dandy. 因此，我有一个正在运行的小订单。

The issue I have pertains to the reset button. 我遇到的问题与“重置”按钮有关。 The reset button clears all elements with the exception being that of the textContent within the confines of a table. 重置按钮清除所有元素，但表范围内的textContent除外。

I have tried without success among many combinations: 我尝试了很多组合但都没有成功：

document.getElementById("flagTotal").reset();

What would be the leanest way to achieve this. 实现此目标的最精简方法是什么。

<!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>&nbsp;</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 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);
});

Answer 1

UPDATED 更新

See step #6 请参阅步骤6

You have 2 <form> tags and one closing </form> tag, so I removed one of them. 您有2个<form>标记和一个结束</form>标记，因此我删除了其中一个。
Added this: form="order_form" to the submit and reset buttons. 在submit和reset按钮中添加了以下form="order_form" ： form="order_form" 。 This will associate the buttons to the form that has the #id of "order_form" 这会将按钮与#id为"order_form"的表单相关联
Removed myFunction() because when properly setup, the reset button will reset form fields by default. 删除了myFunction()因为在正确设置后，默认情况下， reset按钮将重置表单字段。
<input> tags do not have a closing tag <input>标签没有结束标签 ~~</label> </标签>~~
<br> or <br/> not </br> <br>或<br/>不是</br>
Added <output> s to the <td> and swapped ids. 将<output>添加到<td>并交换ID。 They replace the <td> for subtotal function and they are form fields which will be affected by reset 它们代替小计功能的<td> ，它们是将受reset影响的表单字段

Snippet 片段

 $("#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>&nbsp;</p><br> <h3> <p id="demo"></p> </h3>

Answer 2

The reset() function made for the form elements so it resets the values of all the elements in a form and not work for others (like td in your case), to reset td you could simply use innerHTML like : reset()函数是为form元素制作的，因此它可以重置表单中所有元素的值，而不对其他元素起作用（例如td ），要重置td，您可以简单地使用innerHTML例如：

document.getElementById("flagTotal").innerHTML = "";

NOTE : You shouldn't call reset() on fields just the call on form enough : 注意：您不应该只在form上调用足够多的字段来调用reset() ：

function myFunction() {
    document.getElementById("order_form").reset();
    document.getElementById("flagTotal").innerHTML = "";
};

Hope this helps. 希望这可以帮助。

 document.getElementById("flagTotal").innerHTML = "";

 <table border=1> <tr> <th>Value 1</th> <th>Value 2</th> <th>Total</th> </tr> <tr> <td>500</td> <td>500</td> <td id="flagTotal">1000</td> </tr> </table>

重置td的文本内容

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-04-12 17:27:12

UPDATED 更新

Snippet 片段

解决方案2
1 2017-04-12 16:45:39

重置td的文本内容

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-04-12 17:27:12

UPDATED 更新

Snippet 片段

解决方案2 1 2017-04-12 16:45:39

解决方案1
2 已采纳 2017-04-12 17:27:12

解决方案2
1 2017-04-12 16:45:39