Javascript 用于计算带有单选复选框和下拉项的提交表单

Javascript to calculate a submission form with radio checkbox and dropdown items

本文关键字：表单提交复选框计算用于单选 Javascript 更新时间：2023-09-26

我正在尝试使表单计算总数，因为项目是从单选/下拉列表/chekcbox的混合中选择的，并在底部显示总数并能够提交表格。

这就是我所拥有的：http://jsfiddle.net/XD8RW/1430/当您单击不同的选项时，总计不会显示在中间部分

' 定价

<div class="container">
    <div class="column-left">
        <p><b><u>Small ornaments (2 5/8")</u></b>
            <br>Basic figure - $6.50
            <br>(crane, pig, ball, flower etc.)
            <br>Complex figure- $7.50
            <br>(Dragon, skateboard, turkey etc.)
            <br>Foil figures - $8.50
            <br>(Anything made with foil paper)
            <br>Money Figure - $8.50
            <br>(Figures Made out of a $1 bill)
            <br>
            <br>    <b><u>Large ornaments (4")</u></b>
            <br>Basic figure - $8
            <br>(crane, pig, ball, flower etc.)
            <br>Complex figure- $9
            <br>(Dragon, skateboard, turkey etc.)
            <br>Foil figures - $10
            <br>(Anything made with foil paper)
            <br>Money Figure - $10
            <br>(Figures Made out of a $1 bill)
            <br>
        </p>
    </div>
    <div class="column-center">
        <form action="" id="orderform" onsubmit="return false;">
            <fieldset>
                <legend>Make your ornament!</legend>
                <label><u>Size Of the Ornament</u>
                </label>
                <br>
                <input type="radio" name="selectedornament" value="small" onclick="calculateTotal()" />Small Ornament (2 5/8") - $6.50
                <input type="radio" name="selectedornament" value="small" onclick="calculateTotal()" />Large Ornament (4") - $8.50
                <br>
                <label>Figure</label>
                <select id="figure" name='figure' onchange="calculateTotal()">
                    <option value="None">Select Figure</option>
                    <option value="Crane">Crane ($0.50)</option>
                    <option value="Pig">Pig ($0.50)</option>
                    <option value="Baseball">Baseball ($0.50)</option>
                    <option value="Basketball">Basketball ($0.50)</option>
                    <option value="Flower">Flower ($0.50)</option>
                    <option value="Dragon">Dragon ($1.50)</option>
                    <option value="Skateboard">Skateboard ($1.50)</option>
                    <option value="Turkey">Turkey ($1.50)</option>
                    <option value="Cherry">Dancing Girl ($3)</option>
                    <option value="Apricot">Dollar Pig ($1.50)</option>
                    <option value="Buttercream">Dollar Shirt ($1.50)</option>
                    <option value="Chocolate Mousse">Dollar Koi ($12)</option>
                </select>
                <br/>
                <p>
                    <label for='foil' class="inlinelabel">Figure made of foil paper - ($1)</label>
                    <input type="checkbox" id="foil" name='foil' onclick="calculateTotal()" />
                    <br>(Except for designs made of one dollar bill)</p>
                <p>
                    <label class="inlinelabel" for='includeinscription'>Include Custom Glass Etching ($6)</label>
                    <input type="checkbox" id="includeinscription" name="includeinscription" onclick="calculateTotal()" />
                    <input type="text" id="theinscription" name="theinscription" value="Enter Inscription" />
                </p>
                <div id="totalPrice"></div>
                <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
            </fieldset>
        </form>
    </div>
    <div class="column-right">
        <p align="center"><b><u>*NOTE*</u></b>
            </center>
            <p>
                <br>I generally don't charge extra for exterior paint unless you want something very detail-oriented or a design that would consume a large ammount of my paint/require me to buy additional paint colors (I only have red white and green paints for the holidays)
                <br>Some figures are size/paper specific
                <br>Money figures are limiited as to what can/can't be made, as are foiled figures as the foiled paper is sometimes difficult to work with
                <br>When you contact me to place an order, I'll send you an e-mail back with pricing information specifically for your order</p>
    </div>

JS采用JSFIDDLE形式抱歉，如果我发布了这个错误的IM新堆栈溢出

就像Che-Azeh说的那样，有些变量不匹配。你想要使用selectedornament数组（theForm.elements["selectedornament"]）。这里命名为选择蛋糕（您可能想要更改它）。size_prices应该是您定义为ornament_prices的数组。适用于 http://jsfiddle.net/XD8RW/1432/

function getOrnamentSizePrice() {
    var ornamentSizePrice = 0;
    //Get a reference to the form id="orderform"
    var theForm = document.forms["orderform"];
    //Get a reference to the size the user Chooses name=selectedOrnament":
    var selectedCake = theForm.elements["selectedornament"];
    //there are 2 radio buttons selectedornament.length = 2
    //loop through each radio buttons
    for (var i = 0; i < selectedCake.length; i++) {
        //if the radio button is checked
        if (selectedCake[i].checked) {
            //we set ornamentSizePrice to the value of the selected radio button
            //by using the ornament_prices array
            //and get the selected Items value
            ornamentSizePrice = ornament_prices[selectedCake[i].value];
            //If its a match then break out of this loop
            //No reason to continue
            break;
        }
    }
    //return the ornamentSizePrice
    return ornamentSizePrice;
}

虽然您需要仔细检查ornament_prices数组的值

在像 Firefox （ctrl+shift+k ）这样的 Web 控制台上检查您的代码。你会注意到你有几个未定义的变量，如selectedornament和size_prices，它们把事情搞砸了。您还可以使用它来检查其他错误。