片段

Question

所以我有一个正在运作的小订单。

我遇到的问题与重置按钮有关。重置按钮清除所有元素，除了在表的范围内@IndexedEmbedded的元素。

我在许多组合中尝试过没有成功：

textContent

实现这一目标的最简洁方法是什么。

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

Jquery的

<!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>

Answer 1

更新

参见第6步

您有2个<form>代码和一个结束</form>代码，因此我删除了其中一个代码。
将此form="order_form"添加到submit和reset按钮。这会将按钮关联到#id为"order_form"
删除myFunction()因为正确设置后，reset按钮会默认重置表单字段。
<input>代码没有结束标记~~＆lt; / label＆gt;~~
<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>&nbsp;</p><br>

<h3>
  <p id="demo"></p>
</h3>

Answer 2

为表单元素创建的reset()函数，因此它会重置表单中所有元素的值而不适用于其他元素（例如您的td），重置td您可以简单地使用innerHTML之类的：

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

注意：您不应仅仅在reset()上的电话上拨打form字段：

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

希望这有帮助。

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 个答案:

更新

片段