0

我正在为一个需要实现几个功能的类项目工作。现在，我坚持的一个问题是，当用户使用 ComputerForm 中的单选按钮进行选择时，订单总数文本框中的值会自动更新。如果有人能告诉我应该如何编写脚本，将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <title> Final: Computer Order Form </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Joshua Aslan Smith">
    <meta name="Keywords" content="">
    <meta name="Description" content="Final Project">

    <script type="text/javascript">

        function doClear()
            {
                document.AddressForm.customer.value = "";
                document.AddressForm.address.value = "";
                document.AddressForm.city.value= "";
                document.AddressForm.state.options[0].selected = "true";
                document.AddressForm.zip.value = "";
                document.AddressForm.phone.value= "";
                document.AddressForm.email.value= "";

                document.ComputerForm.cases[0].checked = false;
                document.ComputerForm.cases[1].checked = false;
                document.ComputerForm.cases[2].checked = false;

                document.ComputerForm.monitors[0].checked = false;
                document.ComputerForm.monitors[1].checked = false;
                document.ComputerForm.monitors[2].checked = false;

                document.ComputerForm.printers[0].checked = false;
                document.ComputerForm.printers[1].checked = false;
                document.ComputerForm.printers[2].checked = false;

                return;
            }

        //function totalPrice()
            //{
            //  var t1 = document.ComputerForm.cases.selected.value;
            //  var t2 = document.ComputerForm.monitors.selected.value;
            //  var t3 = document.ComputerForm.printers.selected.value;
            //  var total = document.AddressForm.total.value;

        //      total.value = t1.value + t2.value + t3.value;
        //  }

    </script>


</head>

<body>  <h1 align="center">Computer System Order Form</h1>  <table border="black" cellpadding="10px" align="center">        <tr>            <td>
                <table cellpadding="10px">
                <form name="ComputerForm">
                    <tr>
                        <td>
                            Computer Case Style:</br>
                            <input type="radio" name="cases" value="500.00" /> Desktop Case (500.00) </br>
                            <input type="radio" name="cases" value="600.00" /> Mini-Tower Case (600.00) </br>
                            <input type="radio" name="cases" value="700.00" /> Full-Tower Case (700.00) </br>
                        </td>
                        <td>
                            <img src="case.jpg" alt="pc case" >/>   
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Computer Monitor: <br/>
                            <input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
                            <input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
                            <input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00) </br>
                        </td>
                        <td>
                            <img src="monitor.jpg" alt="pc >monitor" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Computer Printer:<br/>
                            <input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
                            <input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
                            <input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
                        </td>
                        <td>
                            <img src="printer.jpg" alt="pc printer" />
                        </td>
                    </tr>
                </form>
                </table>            </td>           <td>
                <table padding="10px">
                    <tr>
                    <form name="AddressForm">
                        <td>
                            Total System Price:
                        </td>
                        <td>
                            $<input type="text" name="total" readonly value="0.00" size="8">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Full Name:
                        </td>
                        <td>
                            <input type="text" name="customer" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Street Address:
                        </td>
                        <td>
                            <input type="text" name="address" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            City:
                        </td>
                        <td>
                            <input type="text" name="city" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            State:
                        </td>
                        <td>
                            <select name="state">
                                <option value=""></option>
                                <option value="DE">DE</option>
                                <option value="NJ">NJ</option>
                                <option value="NY">NY</option>
                                <option value="PA">PA</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Zip:
                        </td>
                        <td>
                            <input type="text" name="zip" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Phone Number:
                        </td>
                        <td>
                            <input type="text" name="phone" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Email Address:
                        </td>
                        <td>
                            <input type="text" name="email">
                        </td>
                    </tr>
                    </form>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="Submit Order" onClick="doSubmit()" />
                        </td>
                        <td>
                            <input type="button" value="Clear Form" onClick="doClear()"  />
                        </td>
                    </tr>
                </table>            </td>       </tr>   </table> </body> </html>
4

1 回答 1

1

首先，将以下代码放在您的 JS 文件中的任何位置：

var prices = new Object();
function updateTotal () {
    var total = 0.00;
    for (var price in prices) {
        total += price;
    }
    document.getElementById("total").value = total;   // Add the id "total" to the input field
}

然后为每个单选按钮的 html 标签添加以下内容：

onchange="javascript:prices['cases'] = parseInt(this.value); updateTotal();"

并替换'cases'为相应的值。现在，当您添加新价格时，您只需将onchange函数添加到适当的标签，该updatePrice()函数无需修改即可正常工作。

在此处查看工作演示。

于 2012-06-10T21:01:48.607 回答