1

所以我正在制作一个订单表格,人们可以在其中选择不同数量的商品,然后使用 JS 计算总数。例如,您可以选择 2 顶棕色帽子(每顶 15 美元),总金额自动变为 30 美元。然后在 POST 页面中,我可以拉出文本框的名称并知道他们订购了 2 顶棕色帽子。

这是我的问题:我想设置一个单选按钮选项,允许他们只选择一个项目,并将其添加到最终总数中,如下所示:

<input type="radio" value="0" name="Syllabus" checked="No" /> Paper ($0)<br />

<input type="radio" value="0" name="Syllabus" checked="No" /> USB ($0)<br />

<input type="radio" value="20" name="Syllabus" checked="No" /> Both ($20)<br />

那么如果选择了“BOTH”,我如何使用 JS 将 20 美元添加到总数中?如果他们选择其他选项之一,那么当然会删除 20 美元。最后,如果他们确实选择了 PAPER 或 USB,我怎么知道他们在最终输出中选择了什么,因为无论哪种方式,值都是 0?

谢谢您的帮助!

------ 如果它对这里的任何人有帮助,是我用来添加其他文本框的值的代码,然后我用零填充总和并四舍五入 ------

// JavaScript Document

    function CalculateTotal(frm) {
    var order_total = 0

    var syllabuscost;

    var radios = document.getElementsByTagName('input');
    var radiovalue;
    for (var z = 0; z < radios.length; z++) {
        if (radios[z].type === 'radio' && radios[z].checked) {
            // get value, set checked flag or do whatever you need to
            radiovalue = radios[z].value; 

            //Change the syllabus cost depending on the value of the radio button
            if (radiovalue == "Paper" || radiovalue == "USB") {
                syllabuscost = 0
            }
            else if (radiovalue == "Both") {
                syllabuscost = 20
            }      
        }
    }

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "PROD") {

            // If so, extract the price from the name
            item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += (item_quantity * item_price)
            }
        }
    }

    // Display the total rounded to two decimal places Also added the syllabuscost to the total price!
    frm.TOTAL.value = round_decimals(order_total+syllabuscost, 2)
}
}

function round_decimals(original_number, decimals) {
    var result1 = original_number * Math.pow(10, decimals)
    var result2 = Math.round(result1)
    var result3 = result2 / Math.pow(10, decimals)
    return pad_with_zeros(result3, decimals)
}

function pad_with_zeros(rounded_value, decimal_places) {

    // Convert the number to a string
    var value_string = rounded_value.toString()

    // Locate the decimal point
    var decimal_location = value_string.indexOf(".")

    // Is there a decimal point?
    if (decimal_location == -1) {

        // If no, then all decimal places will be padded with 0s
        decimal_part_length = 0

        // If decimal_places is greater than zero, tack on a decimal point
        value_string += decimal_places > 0 ? "." : ""
    }
    else {

        // If yes, then only the extra decimal places will be padded with 0s
        decimal_part_length = value_string.length - decimal_location - 1
    }

    // Calculate the number of decimal places that need to be padded with 0s
    var pad_total = decimal_places - decimal_part_length

    if (pad_total > 0) {

        // Pad the string with 0s
        for (var counter = 1; counter <= pad_total; counter++) 
            value_string += "0"
        }
    return value_string
}

和 HTML

<form>
<tr>
<th><label for="PROD_BrownShoe_175">Brown Shoe</label></th>
<td><input type="text" name="PROD_BrownShoe_175" onchange="CalculateTotal(this.form)" /> ($175) - Each</td>
</tr>
<tr>
<th><label for="PROD_BlackShoe_255">Black Shoe</label></th>
<td><input type="text" name="PROD_BlackShoe_255" onchange="CalculateTotal(this.form)" /> ($255) - Each</td>
</tr>
<tr>
<th><label for="PROD_BlueShoe_325">Blue Shoe</label></th>
<td><input type="text" name="PROD_BlueShoe_325" onchange="CalculateTotal(this.form)" /> ($325) - Each</td>
</tr>
<tr>
<th>Total $:</th>
<td><input type="text" name="TOTAL" onFocus="this.form.elements[0].focus()" /></td>
</tr>
</form>
4

3 回答 3

1

您可以将美元值存储在一个对象中。

var costs = {
    "paper" : 0,
    "usb"   : 0,
    "both"  : 0
};

单选按钮的值可以(并且应该)是唯一的。

<input type="radio" value="paper" name="Syllabus" checked="No" /> Paper ($0)<br />

<input type="radio" value="usb" name="Syllabus" checked="No" /> USB ($0)<br />

<input type="radio" value="both" name="Syllabus" checked="No" /> Both ($20)<br />

然后,在您的 CalculateTotal 函数中,引用costs["paper"]等。

于 2012-07-23T15:52:36.800 回答
0

出于这个确切原因,该应该是产品名称而不仅仅是价格。

作为一种解决方案,您可以在由分隔符分隔的值字段中包含名称和价格,这将为您提供足够的信息:

<input type="radio" value="paper|0" name="Syllabus" checked="No" /> Paper ($0)<br />
<input type="radio" value="usb|0" name="Syllabus" checked="No" /> USB ($0)<br />
<input type="radio" value="both|20" name="Syllabus" checked="No" /> Both ($20)<br />

访问脚本中的值:

item_quantity = parseInt(form_field.value.split('|')[1])
于 2012-07-23T15:50:49.170 回答
0

好的,实际上我走了一条不同的路线并解决了这个问题。我已经对其进行了设置,因此它只通过页面上的所有单选按钮,然后添加了一个片段,根据它是否找到值“paper”、“usb”或“both”来更改教学大纲成本。

如果我需要添加更多具有相同类型功能的单选按钮,这使我可以扩展整个事情。

可能有一种更清洁、更有效的方法来做到这一点,但这是我能想到的最好的方法。我得到的回应有点帮助,但并没有真正帮助解决问题。希望这对其他人有帮助。

于 2012-07-24T15:32:01.437 回答