时间戳

首页 > 解决方案 > 单击按钮时输入数量值不增加

asp.net - 单击按钮时输入数量值不增加

问题描述

我正在开发一个在 ASP.Net Web Forms 中开发的 Web 应用程序，该应用程序带有一个块，用于带有引导样式的数量输入并遇到问题。加号和减号根本不适用于增加或减少字段中的值。有没有可以与引导程序一起使用的解决方案？

数量

                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-primary" id="minus-btn"><i class="fa fa-minus"></i></button>
                                </div>
                                <asp:TextBox ID="txtQuantity"  cssClass="form-control form-control-sm"  runat="server" value="1" min="1" ClientIDMode="Static"></asp:TextBox>

                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-primary" id="plus-btn"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

标签： asp.net

解决方案

使用下面的 JQuery 代码来增加/减少数量文本框的值

  function changeQuantity(type) {
        var currentQty = $("#txtQuantity").val();
        if (type == 'plus') {
            $("#txtQuantity").val(parseInt(currentQty, 10) + 1);
        }
        else {
              if((parseInt(currentQty, 10) - 1) < 0)
                $("#txtQuantity").val('0');  
              else{
                   $("#txtQuantity").val(parseInt(currentQty, 10) - 1);
        }
    }

并为按钮附加 onclick 事件

<div class="row">
<div class="col-xs-12 col-md-6">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button type="button" class="btn btn-primary" onclick="changeQuantity('plus');" id="minus-btn">plus</button>
        </div>
          <asp:TextBox ID="txtQuantity"  cssClass="form-control form-control-sm"  runat="server" value="1" min="1" ClientIDMode="Static"></asp:TextBox>
        <div class="input-group-prepend">
            <button type="button" class="btn btn-primary" id="plus-btn" onclick="changeQuantity('minus');">minus</button>
        </div>
    </div>
</div>

推荐阅读