Question

我正在为学校做作业，这是一个餐馆网站。我正在研究＆＃34;在线订购＆＃34;页。我必须在我的网站上添加一个表格，所以我把它放在我的表格中，包括我的所有菜单项目及其成本和总额。我遇到的问题是：我将每个菜单项包装在表单元素中以使我的Javascript工作但是当我尝试验证它时，我得到错误，因为我的fieldset在表单元素之外，如果我移动它我从3个错误变为150个，我只是不明白为什么。此外，这导致我的重置按钮出现问题，因为重置按钮与每个菜单项的形式元素不同，最后我无法在底部工作。

 <!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
</head>
<body>

<script type="text/javascript">
function multiply(element) {
    var row = element.parentNode.parentNode;
    row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
</script>

<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>

<fieldset>
<legend>Basic Information</legend>    
    <ul>
    <li>
        <label for="name">Name:</label> 
        <input type="text" name="name" id="name" value=""/>
    </li>
    <li>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" value=""/>
     </li>
     <li>
        <label for="pwd">City</label>
        <input type="text" name="city" id="city" value=""/>
     </li>
     </ul>
<div>Would you like the same order as last time?</div>       
       <label for="yes">Yes</label>
       <input type="radio" name="yes" id="yes" value="yes" checked="checked">
       <label for="no">No</label>
       <input type="radio" name="yes" id="no" value="no"/>

<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>


</fieldset>

<fieldset>
<legend>Order</legend>
<table id="OrderTable" style="width:100%">
   <tr>
    <th>Food Item</th>
    <th>Quantity</th>
    <th>Unit Price in ($)</th>
    <th>Total Price in ($)</th> 
   </tr>

   <tr>
    <th>Appetizers</th>
    <td></td>
    <td></td>
    <td></td>
   </tr>

   <tr>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="8" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
   </tr>

   <tr>
    <td>Spiedini di Albicocca al Prosciutto Crudo</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="9" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
   </tr>

   <tr>
    <td>Tortino di Gorgonzola</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="8" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
   </tr>

   <tr>
    <th>Soup and Salads</th>
    <td></td>
    <td></td>
    <td></td> 
   </tr>

   <tr>
    <td>Zuppa di Giorno</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="5" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
   </tr>

   <tr>
    <td>Minestrone Piemontese</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="5" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
   </tr>

   <tr>
    <td>Zuppa de Pesce</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="8" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Insalata Mista</td>
     <td><input name="QTY"/></td>
    <td><input name="PRICE" value="6" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Insalata Fagioli</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="6" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <th>Pizza</th>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>Margherita</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="10" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Sicilian</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="12" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Chicken Florentine</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="12" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <th>Pasta</th>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>Bucatini all'Amatriciana</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="16" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Rigatoni Alla Siciliana</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="12" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Paglia e Fieno</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="14" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Orecchiette con Rapini</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="14" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Pappardelle con Sugo di Coniglio</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="15" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <th>Dessert</th>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>Chocolate Zabaglione Cake</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="6" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Zuccotto</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="6" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Tira Misu</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="6" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <th>Beverages</th>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td>Sparkling Water</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="2" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Coke, Iced Tea, Root Beer, Cream Soda</td>
    <td><input name="QTY"></td>
    <td><input name="PRICE" value="2" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Coffee and Brewed Decaf</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="3" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>

  <tr>
    <td>Cappuccino or Americano</td>
    <td><input name="QTY"/></td>
    <td><input name="PRICE" value="3" readonly/></td>
    <td><input name="TOTAL" readonly/></td>
  </tr>


  <tr>
    <td>Total Cost:</td>
    <td></td>
    <td></td>
    <td><label>Total amount</label>
    <input disabled></td>
  </tr>

</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</form>
</body>

</html>

Answer 1

在所有内容周围使用单个表单元素，您仍然可以访问相对于行的正确输入。

例如，您的功能可能如下所示：

function multiply(element) {
    var row = element.parentNode.parentNode;
    row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}

首先获取包含三个输入的行，然后从那里使用querySelectorAll按名称查找TOTAL和PRICE输入。

注意：IE7或更低版本不支持querySelectorAll，但我怀疑这对于作业是否重要。

表单验证错误

1 个答案: