文章/答案/技术大牛

发布

社区首页 >问答首页 >具有分支条件的HTML表单不工作

问具有分支条件的HTML表单不工作
EN

Stack Overflow用户

提问于 2016-05-24 19:08:34

回答 1查看 70关注 0票数 0

我想要创建一个表单，用户输入一个值，检查一个单选按钮，然后单击submit按钮。在以下三种情况下，用户应该通过警告消息获得响应。

例1:表示检查，产品数量> 50 && 50；500

例2:表示检查，产品数量不超过50 && is；500

例3:标准检查

不管我输入了什么值，它都直接进入案例2。案例1和案例3永远不会到达。

代码片段

<!DOCTYPE html>
<html>
<head>
    <title>HTML form</title>
<script>
function calculate() {
        var productQuantity = document.getElementById("product-quantity").value +
            " Units";
        var express = document.getElementById("express");
        var standard = document.getElementById("standard");
        
        // EXPRESSED ------------------------------
        if (express.checked) {
            if ((productQuantity > 50) && (productQuantity < 500)) {
                    // CASE 1 
                    alert("your order of " + productQuantity +
                        " will be ready within two working day");
                } else {
                    // CASE 2
                    alert("sorry! your order is " + productQuantity +
                        " and it has to be over 50 in order to qualify for this service"
                    );
                }
            }
        // STANDARD ------------------------------
                else if (standard.checked) {
                // CASE 3
                alert("your order of " + productQuantity + 
                      " will be ready within seven working day");
            }
        }
</script>
</head>
<body>
    <div class="container">
        <div class="row" style="padding-top:20px">
            <div class="col-md-6">
                <div class="input-group">
                    <label for="product-quantity">Please Enter number of units
                    for this product:</label> <input class="form-control" id=
                    "product-quantity" placeholder="Product Quantity" type=
                    "number">
                </div>
            </div>
        </div>
        <div id="product-time" style="padding-top:20px">
            <label for="title">Production Time</label>
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <input id="express" name="radio" type="radio"> <label for=
                    "productionTime">Express</label>
                </div>
                <div class="col-md-3 col-sm-6">
                    <input id="standard" name="radio" type="radio"> <label for=
                    "productionTime">Standard</label>
                </div>
            </div>
        </div><span class="input-group-btn" style=
        "padding-top:25px"><button class="btn btn-default" id="button" onclick=
        "calculate()" type="button"><span class="input-group-btn" style=
        "padding-top:25px">Submit!</span></button></span>
    </div>
</body>
</html>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-05-24 19:21:25

productQuantity是一个字符串，将其与if语句中的整数进行比较将始终为false。我建议在if语句之前将其转换为整数，然后将其转换回字符串并添加“Unit”部分。

var productQuantity = document.getElementById("product-quantity").value
var productQuantityInt = parseInt(productQuantity, 10);
if (productQuantityInt > 50 && productQuantityInt < 500){...};
productQuantity += ' Units';

希望这有帮助

编辑(oops)：

由于productQuantity输入字段设置为“number”类型，所以您不需要我的代码太多。这应该是可行的：

var productQuantity = document.getElementById("product-quantity").value
if (productQuantity > 50 && productQuantity < 500){...};
productQuantity += ' Units';

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37421931

复制

相似问题

问具有分支条件的HTML表单不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有分支条件的HTML表单不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有分支条件的HTML表单不工作
EN