Question

我想有一个摘要页面。

例如，在第1页中，我将询问客户名称，电子邮件，订单，如html中所示。

点击提交后，会将我链接到第2页，其中会弹出一个窗口，总结如下。

Customer name: xxxxxxx
Email: xxxxxxx
No of quantity ordered for item A:xx
No of quantity ordered for item B:xx
No of quantity ordered for item C:xx
Total cost:xx

HTML：

<!DOCTYPE html>
<html lang = "en">
<head> 
<title> nochange.html </title>
<meta charset = "utf-8" />
  <script type = "text/javascript"  src = "dynValue.js" >
</script>
<style type = "text/css">
  textarea {position: absolute; left: 250px; top: 0px;}
  span {font-style: italic;}
  p {font-weight: bold;}
  td, th, table {border: thin solid black;}
</style>

</head>
<body>
      <form action = "">
  <p>
    <span>
      Customer information 
    </span>
    <br /><br />
    <label>
      Name: 
      <input type = "text"  onmouseover = "messages(0)"
             onmouseout = "messages(4)" />
    </label>
    <br />
    <label>
      Email: 
      <input type = "text"  onmouseover = "messages(1)"
             onmouseout = "messages(4)" />
    </label>
    <br /> <br /></p>
</form>
<form action = "">
  <h3> Order Form </h3>

  <table>
    <tr>
      <th> Product Name </th>
      <th> Price </th>
      <th> Quantity </th>
    </tr>

    <tr>
      <th> French Vanilla (1 lb.) </th>
      <td> $3.49 </td>
      <td> <input type = "text"  id = "french"  
                  size ="2" /> </td>
    </tr>
    <tr>
      <th> Hazlenut Cream (1 lb.) </th>
      <td> $3.95 </td>
      <td> <input type = "text"  id = "hazlenut"  
            size = "2" /> </td>
    </tr> 
    <tr>
      <th> Columbian (1 lb.) </th>
      <td> $4.59 </td>
      <td> <input type = "text"  id = "columbian"  
            size = "2" /></td>
    </tr>
  </table>


  <p>
    <input type = "button"  value = "Total Cost" 
           onclick = "computeCost();" />
    <input type = "text"  size = "5"  id = "cost" 
           onfocus = "this.blur();" />
  </p>


  <p>
    <input type = "submit"  value = "Submit Order" /> 
    <input type = "reset"  value = "Clear Order Form" />
  </p>
</form>
</body>
</html>

JS：

 var helpers = ["Your name must be in the form: \n \
 first name, middle initial., last name",
"Your email address must have the form: \
user@domain",]

function messages(adviceNumber) {
document.getElementById("adviceBox").value = 
                              helpers[adviceNumber];
}
function computeCost() {
var french = document.getElementById("french").value;
var hazlenut = document.getElementById("hazlenut").value;
var columbian = document.getElementById("columbian").value;

document.getElementById("cost").value = 
totalCost = french * 3.49 + hazlenut * 3.95 + 
          columbian * 4.59;
}

Answer 1

我认为这与在您的代码中将french，hazlenut和columbian视为字符串这一事实有关。在执行totalCost计算之前，请尝试使用parseInt。

如果您使用的是html 5且只有较新的浏览器，您可能会使用输入类型=数字而不是输入类型=文本。

Answer 2

为了捕获并显示用户在主页上输入的数据到第二页，您需要使用<form method="post" action="second.php">提交表单，然后在second.php中，您需要获取这些值并显示为需要的。

为了实现这一点，您必须在每个表单元素上使用“name”属性。例如：

<input type = "text"  size = "5"  id = "cost" name="cost" onfocus = "this.blur();" />

输入数据摘要

2 个答案: