-2

好的，我为一个简单的 HTML 表单创建了一个 javascript 来验证并为您提供总数的弹出窗口，或者其中一个输入是否有问题。

继承人的JavaScript

function processOrderform() {
    var OrderFormObj = document.getElementById("OrderForm");
    if (validateInput(OrderFormObj)) {
        var total = calculateTotal(OrderFormObj);
        alert("Your Total Is: $" + total + ". Thank you for your order! We hope to see you again!");
    }
}

function validateInput(OrderFormObj) {
    var product1_prices = OrderFormObj.product1.options[OrderFormObj.product1.selectedIndex].value;
    var product2_prices = OrderFormObj.product2.options[OrderFormObj.product2.selectedIndex].value;
    var product3_prices = OrderFormObj.product3.options[OrderFormObj.product3.selectedIndex].value;
    var product4_prices = OrderFormObj.product4.options[OrderFormObj.product4.selectedIndex].value;

    var quantity1 = OrderFormObj.quantity1.value;
    var quantity2 = OrderFormObj.quantity2.value;
    var quantity3 = OrderFormObj.quantity3.value;
    var quantity4 = OrderFormObj.quantity4.value;

    var taxexempt = OrderFormObj.taxexempt.value;
    var quantity1OK, quantity2OK, quantity3OK, quantity4OK, taxexemptOK;

    quantity1OK = validateQuantity1(quantity1);
    quantity2OK = validateQuantity2(quantity2);
    quantity3OK = validateQuantity3(quantity3);
    quantity4OK = validateQuantity4(quantity4);
    taxexemptOK = validateTaxExempt;



    if (OrderFormObj.tax.checked) {
        taxexemptOK = validateTaxExempt(taxexempt);
    }

    return quantity1OK && quantity2OK && emailOK && taxexemptOK;


}

function validateQuantity1(quantity1) {

    if (isNaN(quantity1)) {
        alert("Error: Please input a number for processor quantity.")
        return false;
    }
    if (quantity1 < 0 || quantity1 > 50) {
        alert("Error: The maximum quantity of processors you can order is 50. Please select a smaller amount or contact us for more information.")
        return false;
    }
    return true;
}

function validateQuantity2(quantity2) {

    if (isNaN(quantity2)) {
        alert("Error: Please input a number for storage drive quantity.")
        return false;
    }
    if (quantity2 < 0 || quantity2 > 50) {
        alert("Error: The maximum quantity of storage drives you can order is 50. Please select a smaller amount or contact us for more information.")
        return false;
    }
    return true;
}

function validateQuantity3(quantity3) {

    if (isNaN(quantity3)) {
        alert("Error: Please input a number for memory quantity.")
        return false;
    }
    if (quantity3 < 0 || quantity3 > 50) {
        alert("Error: The maximum quantity of memory you can order is 50. Please select a smaller amount or contact us for more information.")
        return false;
    }
    return true;
}

function validateQuantity4(quantity4) {

    if (isNaN(quantity4)) {
        alert("Error: Please input a number for graphics card quantity.")
        return false;
    }
    if (quantity4 < 0 || quantity4 > 50) {
        alert("Error: The maximum quantity of graphics cards you can order is 50. Please select a smaller amount or contact us for more information.")
        return false;
    }
    return true;
}

function validateTaxExempt(taxexempt) {
    var p = taxexempt.search(/^\d{8}$/);
    if (p == 0)
        return true;
    else {
        alert("Error: Invalid tax-exempt code. Please enter an 8-digit code.");
        return false;
    }
}


function calculateTotal(OrderFormObj) {
    var product1_prices = OrderFormObj.product1.options[OrderFormObj.product1.selectedIndex].value;
    alert("Processor Price is $" + product1_prices);
    var quantity1 = OrderFormObj.quantity1.value;
    alert("Your processor quantity is " + quantity1);

    var product2_prices = OrderFormObj.product2.options[OrderFormObj.product2.selectedIndex].value;
    alert("Storage Drive Price is $" + product2_prices);
    var quantity2 = OrderFormObj.quantity2.value;
    alert("Your storage drive quantity is " + quantity2);

    var product3_prices = OrderFormObj.product3.options[OrderFormObj.product3.selectedIndex].value;
    alert("Memory price is $" + product3_prices);
    var quantity3 = OrderFormObj.quantity3.value;
    alert("Your memory quantity is " + quantity3);

    var product4_prices = OrderFormObj.product4.options[OrderFormObj.product4.selectedIndex].value;
    alert("Graphics Card price is $" + product4_prices);
    var quantity4 = OrderFormObj.quantity4.value;
    alert("Your graphics card quantity is " + quantity4);

    var taxexempt = OrderFormObj.taxexempt.value;
    alert("Your tax exempt code is " + taxexempt);
    var quantity1OK, quantity2OK, quantity3OK, quantity4OK, taxexemptOK;

    var checkboxs = OrderFormObj.service;
    for (var i = 0; i < checkbox.length; i++) {
        if (checkboxs[i].checked) {
            var services_prices = checkbox[i].value;
            break;
        }
    }


    var getProduct1Price = parseFloat(product1_prices) * parseFloat(quantity1);
    var getProduct2Price = parseFloat(product2_prices) * parseFloat(quantity2);
    var getProduct3Price = parseFloat(product3_prices) * parseFloat(quantity3);
    var getProduct4Price = parseFloat(product4_prices) * parseFloat(quantity4);
    var service_price = parseFloat(document.getElementById('service').value);


    var total = getProduct1Price + getProduct2Price + getProduct3Price + getProduct4Price + service_price;
    return total;
}

这是它的html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- bmi5.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="orderscript.js">
    </script>
            <title>Products & Services</title>
    </head>
    <body>
        <h1>PC Products</h1>

    <form id="OrderForm" method="post" action=""
        onsubmit="processOrderform()">
    <tr>
    <td><label for="product1">Processors:</label></td>
      <td><select id="product1" name="product1">
      <option>Select Device</option>
       <option value="139.99">Intel i3 - $140</option>
       <option value="189.99">Intel i5 - $190</option>
       <option value="239.99">Intel i7 - $240</option>
       </select></td>

    <td><label for="quantity1">Quantity :</label></td>
    <td><input id="quantity1" type="text" name="quantity1" size ="1" /></td> 
    </tr><br /> 

     <tr>
    <td><label for="product2">Storage:</label></td>
     <td><select id="product2" name="product2"></td>
       <td><option>Select Device</option>
       <option value="149.99">SSD 128GB - $149.99</option>
       <option value="249.99">SSD 256GB - $249.99</option>
       <option value="519.00">SSD 512GB - $519.00</option>
       <option value="69.99">HDD 500GB - $69.99</option>
       <option value="109.99">HDD 1TB - $109.99</option>
       <option value="149.99">HDD 1.5TB - $149.99</option>
       <option value="199.99">HDD 3TB - $199.99</option>
    </select></td>

    <td><label for="quantity2">Quantity :</label></td>
         <td><input id="quantity2" type="text" name="quantity2" size ="1"></td>
    </tr><br />

    <tr>
     <td><label for="product3">Memory:</label></td> 
     <td><select id="product3" name="product3"></td>
   <td><option>Select Device</option>
       <option value="59.99">DDR3 8GB - $59.99</option>
       <option value="109.99">DDR3 16GB - $109.99</option>
       <option value="209.99">DDR3 32GB - $209.99</option>
      </select></td>

    <td><label for="quantity3">Quantity :</label></td>
        <td><input id="quantity3" type="text" name="quantity3" size ="1"></td>
    </tr><br />

        <tr>
   <td><label for="product4">Graphics Card:</label></td> 
     <td><select id="product4" name="product4"></td>
      <td><option>Select Device</option>
       <option value="139.99">Nvidia - $649.99</option>
       <option value="189.99">AMD - $449.99</option>
       </select></td>

        <td><label for="quantity4">Quantity :</label></td>
        <td><input id="quantity4" type="text" name="quantity4" size ="1"></td>
    </tr><br />

    <br />

<table> Service and Repair  
<tr><td><input id="virus" type="checkbox" name="service" value="99.99"></td>
  <td>Virus Removal</td> <td align="right"><tt>99.99</tt></td></tr>
<tr><td><input id="lesson" type="checkbox" name="service" value="29.99"></td>
  <td>1 Hour Computer Lessons</td> <td align="right"><tt>29.99</tt></td></tr>
  <tr><td><input id="assembly" type="checkbox" name="service" value=49.99"></td>
  <td>PC Assembly</td> <td align="right"><tt>49.99</tt></td></tr>

</table>
    <br />

    <h4><i>*Sales Tax of 8.25% applies</i></h4>
    <td>Tax exempt check box:
<input type="checkbox" name="reply" value="yes" /><br /></td>

    <p>
    <input type="hidden" id="itemname" name = "itemname" value= "">
                <td><input type="submit" value="Submit your order" /></td>
            <td><input type="reset" value="Reset form" /></td>
            </p>

            </form>
        </body>
    </html>

任何输入都会很棒。

4

1 回答 1

0

如果您正在使用其“id”访问某个表单元素，则不需要对它们也使用表单 id。您可以像这样简单地访问表单元素：

var product1 = document.getElementById('product1').value;

如果你想用它们的名字访问表单元素，那么你也必须使用表单名称。假设您的表单名称是“OrderForm”，它将是这样的：

document.forms['OrderForm']['product1'].value;

这些事情你必须在你的 javascript 部分更正。其次，您使用了一些代码，例如：

var quantity1 = OrderFormObj.quantity1.value;

这也需要纠正。如果你想要 quantity1 字段值，你可以像这样简单地得到它：

var quantity1 = document.getElementById('quantity1').value;
于 2013-07-02T11:17:35.127 回答