Question

我无法使用我的javascript代码进行提醒。首先，我的网站页面是一个结帐页面。我希望我的警报总结客户订购的内容。客户可以通过勾选复选框并选择他们想要检查的项目数来选择产品。还有一个总价格字段来向客户显示他们将支付多少钱。警报将总结他们购买的东西。

例如

“您已订购：iphone，数量：1，价格：£300 playstation 4，数量：3价格：£350

“你将支付：650英镑”

单击按钮“下订单”时，系统会弹出警告。

我在尝试使用我的javascript代码进行提醒时遇到了困难

我的网站是一个结帐网站。客户可以通过勾选复选框并选择该产品的数量来选择产品。还有一个字段，它们的总价格会自动显示。

我需要一个警报来总结客户订单。例如：

“您已订购：iphone，价格：300英镑，数量：2。电视，价格：400英镑，数量：1” “必须支付的总价格：1000英镑”

请你把它实现到我的代码中。我会很开心的。

 <!doctype html>
 <html>
 <meta charset="UTF-8">
 <head>
  <style>
    img {padding:10px 70px;}
    .buttons {text-align: center}
    .quantity { padding:5px; width:20px; border: 2px solid #112315; }
    legend {text-align: center; font-family: fantasy; font-size:30px;}
    fieldset {border:0;}
    label {float:left;width:20%; text-align:right; font-weight:bold;margin-right:10px; }    
    .check {margin-left:289px;}
    .total {float: right;}
    h2 {text-align: center} 
  </style>

<script>
 function total(frm) {
   var tot         = 0;
   var checkboxes  = document.forms[frm.id].elements["checkbox"];
   var quants      = document.forms[frm.id].elements["quantity"];

   for (var i = 0; i < checkboxes.length; i++) 
   {
     if (checkboxes[i].checked) 
      {
        // if tabIndex correctly specified
        if (checkboxes[i].tabIndex == quants[i].tabIndex)
            // add to total
            tot += Number(checkboxes[i].value) * Number(quants[i].value);
      }
  }
document.getElementById("totalDiv").firstChild.data = "£" + tot;
if (tot >= 200){
  document.body.style.backgroundColor = "#BCBCFF";
}
if (tot >= 700){
  document.body.style.backgroundColor = "#FFFFA3";
}
if (tot >= 1000){
document.body.style.backgroundColor = "lightskyblue";
} 
if (tot >= 1500){
document.body.style.backgroundColor = "#66FF99";
}   

}

function validateFields() {

  var x=document.forms["Form"]["fName"].value;
  if (x=="")
   {
     alert("First Name must be filled out");
     return false;
   }

   var y=document.forms["Form"]["lName"].value;
   if (y=="")
   {
     alert("Last Name must be filled out");
     return false;
   }

var z=document.forms["Form"]["Address"].value;
if (z=="")
 {
  alert("Address must be filled out");
  return false;
 }

var a=document.forms["Form"]["Town"].value;
if (a=="")
 {
  alert("Town must be filled out");
  return false;  
 }

var b=document.forms["Form"]["Postcode"].value;
if ( b=="")
 {
  alert("Postcode must be filled out");
  return false; 
 }
}      


</script>


</head>

<body>
<form action="nextpage" method="post" id="theForm">
   <fieldset>
    <legend>Choose your Products</legend>
    <table style="padding:2px">
        <tr>
            <td>
                <img src="http://placehold.it/200x200" />
            </td>
            <td>
                <img src="http://placehold.it/200x200" />
            </td>
            <td>
                <img src="http://placehold.it/200x200" />
            </td>
            <td>
                <img src="http://placehold.it/200x200" />
            </td>
        </tr>
        <tr>
            <td class="buttons">
                <div>
     Mobile  <br>   <input tabindex="1" name="checkbox" type="checkbox" value="200"         onclick="total(this.form);" />£200</div>
                <input tabindex="1" name="quantity" min="0" max="5" type="number"         class="quantity" value="1" onclick="total(this.form);" />
            </td>
            <td class="buttons">
                <div>
                Television <br> <input tabindex="2" name="checkbox" type="checkbox" value="450"         onclick="total(this.form);" />£450</div>
                <input tabindex="2" name="quantity" min="0" max="5" type="number"          class="quantity" value="1" onclick="total(this.form);" />
            </td>
            <td class="buttons">
                <div>
                   Playstaion 4 <br> <input tabindex="3" name="checkbox" type="checkbox"         value="350"          onclick="total(this.form);" />£350</div>
                <input tabindex="3" name="quantity" min="0" max="5" type="number"         class="quantity" value="1" onclick="total(this.form);" />
             </td>
            <td class="buttons">
                <div>
                 Hi-Fi <br> <input tabindex="4" name="checkbox" type="checkbox" value="150"         onclick="total(this.form);" />£150</div>
                <input tabindex="4" name="quantity" min="0" max="5" type="number"         class="quantity" value="1" onclick="total(this.form);" />
            </td>
        </tr>
    </table>
</fieldset>
</form>

<form name="Form" action="demo_form.asp" onsubmit="return validateFields()" method="post">
<fieldset>
<h2> Personal Details</h2>

<p> <label for="Title"> Title:</label>  
<select name="Title">
    <option value="Mr" selected=""> Mr </option>
    <option value="Mrs"> Mrs </option>
    <option value="Miss"> Miss </option>
    <option value="Ms"> Ms </option>
    <option value="Dr"> Dr </option>
 </select>

</p><p> <label for="first name">First Name*:</label>  
<input type="text" name="fName" size="20" autofocus=""> </p>

<p> <label for="last name">Last Name*:</label> 
<input type="text" name="lName" size="20"> </p>

<p> <label for="address">Address*:</label> 
<input type="text" name="Address" size="40"> </p>

<p> <label for="town">Town*:</label> 
<input type="text" name="Town" size="20"> </p>

<p> <label for="postcode">Postcode*    :</label>  
<input type="text" name="Postcode" size="8"> </p>

<p> <label for="email address">Email address:</label> 
<input type="email" id="Email" placeholder="name@my.westminster.ac.uk" size="30"></p>

<p> <label for="Telephone">Telephone:</label>  
<input type="text" name="Telephone" size="20"> </p>

 <div>
<input type="button" class='check' value="Check Details"  onclick='return validateFields()'/>
 </div>    

 <div id="totalDiv" class= 'total'>£0</div>
 <br>       
 <div> <input type="button" class= 'total' value="Place Order" onclick="total(this.form)"/> </div>
</fieldset>

</form>

在javascript中购买的客户商品的提醒摘要

0 个答案: