如何使用jquery参考另一个文本框来验证动态生成的文本框

时间:2012-09-18 06:56:13

标签: jquery html

在阅读此问题之前,请检查this-click here工作演示。 如果用户向我的父文本框提供任何值(这是静态txtbox),我将生成3个文本框(动态启用键盘事件)。现在我想做验证

我有一个文本框(比如父文本框),如果用户在其中输入任何数字,则动态生成3个文本框。(即id,username,amount) 现在我想对它进行j查询验证,这样所有输入的金额值的总和应该等于在父文本框中输入的值。

                                <!DOCTYPE html>
                                <html>
                                <head>
                                  <style>#multiple{
                                  margin-bottom:10px;
                                  border:1px solid #333;
                                  background:#efefef;
                                  color:#000;
                                }
                                #autoresult input{
                                  margin-left:5px;
                                  border:1px solid #333;
                                  background:#a4c4f4;
                                  margin-top:5px;
                                }
                                  </style>
                                  <script src="http://code.jquery.com/jquery-latest.js"></script>
                                </head>
                                <body align="center">
                               <form id="frm">
                 Please select your friends: <select id="multiple" multiple="multiple" style="width: 120px;height: 120px;">
                    <option value="1" >
                      Ashutosh
                    </option>
                    <option value="6">
                      Jems Bond
                    </option>
                    <option value="7">
                      Danial Crack
                    </option>
                    <option value="8">
                      Dan Brown
                    </option>
                    <option value="9">
                      Angilina Jolly
                    </option>
                  </select>
                  <br/>
                  <input type="text" id="amount" name="amount" size="33" id="" placeholder="Enter Total Budget Amount" style="background-color:orange;font-size: 22px;color: blue"/>

                  <!--User will  enter the amount in this textbox -->
                  <div id="autoresult">
                  </div>
                </form>

                                <script>
                                  $(function() {
                    $("#multiple").change(function() {
                        var multipleValues = $("#multiple").val() || "";
                        var autoresult = "";
                        if (multipleValues != "") {
                            var aVal = multipleValues.toString().split(",");
                            var count = $("#multiple :selected").length;
                            $.each(aVal, function(i, value) {
                                autoresult += "<div>";
                                autoresult += "<input type='text' readonly='true' name='opval" + (parseInt(i) + 1) + "' value='" + value.trim() + "'>";
                                autoresult += "<input type='text' readonly='true' name='optext" + (parseInt(i) + 1) + "' value='" + $("#multiple").find("option[value=" + value + "]").text().trim() + "'>";
                                autoresult += "<input type='text' name='option" + (parseInt(i) + 1) + "' value='' ' placeholder='Enter my amount' size='120'> <p>Want a validation for this textbox</p>   <font color='red'>Error SUM of all dynamic generated textbox values exceeds the total budget amount <font>"

                                ; //autoresult should display in this textbox .i.e (autoresult= amount/count )
                                autoresult += "</div>"; 
                            });
                        }
                        //Set autoresult
                        $("#autoresult").html(autoresult);

                    });

                    $("#amount").keyup(function() {
                        var multipleValues = $("#multiple").val() || "";
                        var amount = $("#amount").val();
                        var aVal = multipleValues.toString().split(",");
                        var count = $("#multiple :selected").length;
                        if (multipleValues != "")
                        {
                               $.each(aVal, function(i, value) {
                                var price = amount / count;
                                $("input[name=option" + (parseInt(i) + 1) + "]").val(price);
                            });
                        }

                    });
                         $("#amount").keydown(function() {
                        var multipleValues = $("#multiple").val() || "";
                        var amount = $("#amount").val();
                        var aVal = multipleValues.toString().split(",");
                        var count = $("#multiple :selected").length;
                        if (multipleValues != "")
                        {
                               $.each(aVal, function(i, value)
                            {
                                var price = amount / count;
                                $("input[name=option" + (parseInt(i) + 1) + "]").val(price);
                            });
                        }

                    });



                });
                                </script>
                                </body>
                                </html>

1 个答案:

答案 0 :(得分:-1)

工作演示:http://codebins.com/bin/4ldqp7a/3

请查看以上链接