访问 Javascript/JQuery 函数中的控件答案

【问题标题】：Accessing controls in Javascript/JQuery functions访问 Javascript/JQuery 函数中的控件
【发布时间】：2016-03-10 11:41:45
【问题描述】：

当我在文本框的“onblur”事件上调用函数以将其值乘以其他文本框中的另一个值时，我在 Javascript 和 JQuery 中遇到问题，代码在没有母版页的情况下工作正常，但在使用母版页后我不'不知道在将关联控件的 id 传递给函数时如何搜索控件，一种模式是通过 JQuery 使用 $("[id$=test]" 访问母版页中控件的 id ）给我错误，相关的代码。我想做的是乘以2个值'txtquan1'和'txtattherate1'并将结果存储在'lblamnt1'中，当我单击提交按钮时，值存储在'lblamnt1'中消失了，我有 googleit 并且除了 Enableviewstate=True 之外找不到解决方案；但是暂时我在文本框上使用jquery时问题仍然存在.....请帮助

aspx 文件中的代码是：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

     <script type="text/javascript">
         $(function () {
            $("[class$=txtreadonly]").attr('readonly', 'readonly');
         });

         function funAmount(suffix, quantity, amount, totalamt) {

             var qty = document.getElementById(suffix + quantity).value;

             var amt = document.getElementById(suffix + amount).value;
             var total = parseFloat(qty) * parseFloat(isNaN(amt) ? 0 : amt);

             document.getElementById(suffix + totalamt).innerText = isNaN(total) ? 0 : total;
             document.getElementById('ddltaxtype').options[0].selected = "true";
         }

         function funtax(selectedvalue) {
             var value22 = document.getElementById(selectedvalue).value

             totalamount = 0;
             for (i = 1; i <= 5; i++) {

                 var val1 = document.getElementById('lblamnt' + i).value;
                 if (val1 != "") {
                     totalamount = totalamount + parseFloat(val1);
                 }
             }

             var disc = document.getElementById('txtdiscount').value
             if (disc != "") {
                 totalamount = parseInt(totalamount) - parseInt(disc);
             }

             if (value22 == 'amount is tax Free') {

                 document.getElementById('lbltotalamnt').value = totalamount;
                 document.getElementById('lbltax').value = '0';

             }
             else if (value22 == 'amount is inclusive of tax') {

                 document.getElementById('lbltotalamnt').value = totalamount;
                 var calTax = (totalamount * 100) / 105;
                 document.getElementById('lbltax').value = parseFloat(totalamount) - parseFloat(calTax);
             }
             else if (value22 == 'amount is taxable') {

                 var calTax = (totalamount * 5) / 100;
                 calTax = parseFloat(calTax);
                 document.getElementById('lbltax').value = calTax;
                 document.getElementById('lbltotalamnt').value = totalamount + calTax;
             }
         }
    </script>

    <style type="text/css">
        .auto-style1 {
            width: 1080px;
        }
        .auto-style3 {
            width: 253px;
        }
        .auto-style4 {
            height: 244px;
            }
    * {
    padding:0;
  /*  margin:0;   */
}
        .auto-style6 {
            width: 337px;
        }
        .auto-style7 {
            width: 11px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">




    <div>

        <table align="center" class="auto-style1">
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Verify the custumer details and start billing"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="Label10" runat="server" Text="Bill Number : "></asp:Label><asp:Label ID="lblbillno" runat="server" Text=""></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style3">
                    <asp:Label ID="Label2" runat="server" Text="Custumer Name"></asp:Label>
                    <asp:Label ID="lblcusname" runat="server" Text="Custumer Name"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="Label3" runat="server" Text="Custumer Ph"></asp:Label>
                    <asp:Label ID="lblcusph" runat="server" Text="Custumer Ph"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Label ID="Label11" runat="server" Text="Only 20 records can be inserted at a time"></asp:Label>
                </td>
            </tr>

            <tr>
                <td class="auto-style4" colspan="4">
                    <table id="table1" align="left" class="auto-style1" border="1" bordercolor="grey">
                        <tr>
                            <td class="auto-style7">
                                Serial Number
                            </td>
                            <td class="auto-style6">
                                Select Quantity
                            </td>
                            <td>
                                Item Name
                            </td>
                            <td>
                                AT The Rate
                            </td>
                            <td>
                                Amount
                            </td>

                        </tr>

                        <tr>
                            <td class="auto-style7">

                                <asp:Label ID="lblserialnumber" runat="server" Text="1"></asp:Label>

                            </td>
                            <td class="auto-style6">

                                <asp:TextBox ID="txtquan1" runat="server" onblur="funAmount(this.id.replace('txtatthe1',''),'txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="txtitem1" runat="server"></asp:TextBox>

                            </td>
                            <td>

                                 <asp:TextBox ID="txtatthe1" runat="server" onblur="funAmount(this.id.replace('txtquan1',''), 'txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>

                            </td>
                            <td>
                                <asp:TextBox ID="lblamnt1" class="txtreadonly" runat="server" Text=""></asp:TextBox>
                            </td>

                        </tr>
                        <tr>
                            <td class="auto-style7">

                                <asp:Label ID="Label4" runat="server" Text="2"></asp:Label>

                            </td>
                            <td class="auto-style6">

                                <asp:TextBox ID="txtquan2" runat="server" onblur="funAmount(this.id.replace('txtatthe2',''),'txtquan2','txtatthe2','lblamnt2')"></asp:TextBox>
                            </td>
                            <td>

                                <asp:TextBox ID="txtitem2" runat="server"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="txtatthe2" runat="server" onblur="funAmount(this.id.replace('txtquan1',''), 'txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>

                            </td>
                            <td>
                                <asp:TextBox ID="lblamnt2" class="txtreadonly" runat="server" Text=""></asp:TextBox>
                            </td>                            
                        </tr>
                        <tr>
                            <td class="auto-style7">

                                <asp:Label ID="Label5" runat="server" Text="3"></asp:Label>

                            </td>
                            <td class="auto-style6">

                                <asp:TextBox ID="txtquan3" runat="server" onblur="funAmount(this.id.replace('txtatthe3',''),'txtquan3','txtatthe3','lblamnt3')"></asp:TextBox>
                            </td>
                            <td>

                                <asp:TextBox ID="txtitem3" runat="server"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="txtatthe3" runat="server" onblur="funAmount('txtquan3','txtatthe3','lblamnt3')"></asp:TextBox>

                            </td>
                            <td>
                                <asp:TextBox ID="lblamnt3" class="txtreadonly" runat="server" Text="" ></asp:TextBox>
                            </td>                            
                        </tr>

                        <tr>
                            <td class="auto-style7">

                                <asp:Label ID="Label7" runat="server" Text="4"></asp:Label>

                            </td>
                            <td class="auto-style6">

                                <asp:TextBox ID="txtquan4" runat="server" onblur="funAmount(this.id.replace('txtatthe4',''),'txtquan4','txtatthe4','lblamnt4')"></asp:TextBox>
                            </td>
                            <td>

                                <asp:TextBox ID="txtitem4" runat="server"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="txtatthe4" runat="server" onblur="funAmount('txtquan4','txtatthe4','lblamnt4')"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="lblamnt4" class="txtreadonly" runat="server" Text="" ></asp:TextBox>

                            </td>

                        </tr>
                        <tr>
                            <td class="auto-style7">

                                <asp:Label ID="Label8" runat="server" Text="5"></asp:Label>

                            </td>
                            <td class="auto-style6">

                                <asp:TextBox ID="txtquan5" runat="server" onblur="funAmount(this.id.replace('txtatthe5',''),'txtquan5','txtatthe5','lblamnt5')"></asp:TextBox>
                            </td>
                            <td>

                                <asp:TextBox ID="txtitem5" runat="server"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="txtatthe5" runat="server" onblur="funAmount('txtquan5','txtatthe5','lblamnt5')"></asp:TextBox>

                            </td>
                            <td>

                                <asp:TextBox ID="lblamnt5" class="txtreadonly" runat="server" Text="" ></asp:TextBox><nobr />

                            </td>

                        </tr>
                        <tr>
                            <td class="auto-style7">
                                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                            </td>
                            <td class="auto-style6">
                                <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
                            </td>
                            <td>
                                <asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
                            </td>
                            <td>
                                <asp:PlaceHolder ID="PlaceHolder4" runat="server"></asp:PlaceHolder>
                            </td>
                            <td>
                                <asp:PlaceHolder ID="PlaceHolder5" runat="server"></asp:PlaceHolder>
                                 <asp:Button ID="btnnext" runat="server" Text="New Row" style="margin-left: 6px" Width="59px" OnClick="btnnext_Click" />
                            </td>

                        </tr>
                        <tr>
                            <td class="auto-style7">

                            </td>
                            <td>

                            </td>
                            <td>

                            </td>
                            <td>

                                <asp:Label ID="Label12" runat="server" Text="Enter the discount if any"></asp:Label>

                            </td>
                            <td>

                                <asp:TextBox ID="txtdiscount" runat="server" ></asp:TextBox>

                            </td>
                        </tr>
                        <tr>
                            <td class="auto-style7">

                                <asp:DropDownList ID="ddltaxtype" runat="server" style="margin-left: 0px"  onblur="funtax('ddltaxtype')"  Width="92px" ></asp:DropDownList>

                            </td>
                            <td class="auto-style6">
                                <asp:DropDownList ID="ddlsalescomm" runat="server" style="margin-left: 0px" Width="159px" ></asp:DropDownList><nobr />
                                <asp:DropDownList ID="ddlcashmode" runat="server" style="margin-left: 0px" ></asp:DropDownList>
                            </td>
                            <td>
                                <asp:Label ID="Label9" runat="server" Text="Total Tax : "></asp:Label><no br />
                                <asp:TextBox ID="lbltax" class="txtreadonly" runat="server" Text="0"  Width="62px"></asp:TextBox>
                            </td>
                            <td>
                                <asp:Label ID="Label6" runat="server" Text="Total Amount"></asp:Label> <no br />
                                <asp:TextBox ID="lbltotalamnt" class="txtreadonly" runat="server" Text="0" Width="72px"></asp:TextBox>
                            </td>
                            <td>

                    <asp:Button ID="btnsave" runat="server" Text="Save" OnClick="btnsave_Click" />

                                <asp:Button ID="btnsaveexit" runat="server" Text="Save & exit" OnClick="btnsaveexit_Click" Width="79px" />

                    <asp:Button ID="btnexit" runat="server" Text="Exit" OnClick="btnexit_Click" />

                            </td>

                        </tr>

                    </table>
                </td>
            </tr>

    </table>
    </div>


</asp:Content>

【问题讨论】：

标签： javascript jquery asp.net

【解决方案1】：

我已经修改了您的“onblur”函数调用和 javascript 函数并进行了测试。现在效果很好。请找到以下子页面并告诉我：

<div class="row">
    <div class="col-md-4">
        <asp:TextBox ID="txtquan1" runat="server" onblur="funAmount(this.id.replace('txtquan1',''), 'txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>
        <asp:TextBox ID="txtatthe1" runat="server" onblur="funAmount(this.id.replace('txtatthe1',''),'txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>
        <asp:Label runat="server" ID="lblamnt1" Text=""></asp:Label>
    </div>

</div>
<script type="text/javascript">

 function funAmount(suffix, quantity, amount, totalamt) {

     var qty = document.getElementById(suffix + quantity).value;

     var amt = document.getElementById(suffix + amount).value;
     var total = parseFloat(qty) * parseFloat( isNaN(amt) ? 0 : amt);

     document.getElementById(suffix + totalamt).innerText = isNaN(total) ? 0 : total;
     //document.getElementById('ddltaxtype').options[0].selected = "true";
 }

【讨论】：

先生声明'var qty = document.getElementById(suffix + quantity).value;'根本没有执行，后缀的值为'contentplaceholder1_txtquan1'然后根据语句qty访问控件'contentplaceholder1_txtquan1_txtquan1'但它没有执行，我想要实现的是访问控件'txtatthe1'和'lblamnt1'每行（int值递增），我想再次提到我想通过javascript从内容页面访问内容页面中的控件属性，我们不可能根据参数值搜索，即'txtatthe1'
六月，您能否发布您的整个 Html（或 Aspx）和 Js？我不知道这个 id 'contentplaceholder1_txtquan1_txtquan1' 是如何生成的。

【解决方案2】：

检查这是否符合您的要求：

1.在页面指令中使用 ClientIDMode="Static"。

2.从 funAmount 中删除后缀，因为控件 ID 不会附加母版页 ID。

        function funAmount(quantity, amount, totalamt) {           
        var qty = document.getElementById(quantity).value;
        var amt = document.getElementById(amount).value;
        var total = parseFloat(qty) * parseFloat(isNaN(amt) ? 0 : amt);
        document.getElementById(totalamt).innerText = isNaN(total) ? 0 : total;
        document.getElementById('ddltaxtype').options[0].selected = "true";
    }

3.将控件适当地传递给函数。例如：

 <asp:TextBox ID="txtquan1" runat="server" onblur="funAmount('txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>
 <asp:TextBox ID="txtatthe1" runat="server" onblur="funAmount('txtquan1','txtatthe1','lblamnt1')"></asp:TextBox>

4.确保传递了正确的控件 ID，从您的代码中我看到传递给“txtatthe2”的值不正确。

5.如果您的行要动态增长，您应该使用网格控件！

【讨论】：

我已经使用过它，问题是你可以看到每个 onblur 函数都传递了 3 个值。如果我使用“txtquan1”，那么在下一个 onblur 请求中，此代码将无效，因为它会是“txtquan2”，它将递增到 3，依此类推，这是函数传递“txtquan+任何整数值”时的主要问题，那么代码应该检测到类似 document.getElementById('') 但这给了我错误，我用谷歌搜索了它但没有找到解决方案....
'quantity'是javascript代码中的接收参数......请帮助先生......谢谢提前
先生，我已经上传了我的整个 aspx 文件，但第一行没有正确上传......对不起