Question

我需要帮助获取动态生成的文本框的值。虽然我找到了解决方案，但似乎我无法遵循它。

我想要实现的目标： 1.借助添加按钮创建文本框。 2.使用“删除”按钮删除文本框。 3.在文本框中获取输入的值。 4.Validate在文本框中输入值没有两个文本框应该包含相同的值（即使在大写/小写的情况下也是如此）。

我遇到了第3和第4项要求。

以下是我正在尝试的代码。

        <!doctype html>
    <html>
     <head>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

      var counter=0;

      $(document).ready(function(){
        $(".addCF").click(function(){
            $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom DB</label></th><td><input type="text" class="code" id="customFieldValue' + counter + '" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <input type="button" name="remCFName" class="remCF" value="Remove"></td></tr>');

            counter++;

            alert("Value " +counter);
        });


        $("#customFields").on('click','.remCF',function(){
            $(this).parent().parent().remove();

            counter--;
            alert("Value_New " +counter);
        });

        $(".getButtonValue").click(function () {
        var msg ='';
        for(i=0; i<=counter; i++){
          msg += "\n customFieldValue #" + i + " : " + $('#customFieldValue' + i).val();
        }
           alert(msg);
         });

    });
    </script>
     </head>
     <body>
      <table class="form-table" id="customFields">
        <tr valign="top">
            <th scope="row"><label for="customFieldName">Custom DB</label></th>
            <td>
                <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp;

                <input type="button" name="addCFName" class="addCF" value="Add">
            </td>

        <td>
           <input type="button" name="getValue" class="getButtonValue" value="Get Value">
        </td>

        </tr>
    </table>
     </body>
    </html>

有人可以帮我解决这个问题吗。

如果我无法解释我的问题，请告诉我。

由于

Answer 1

这样的事情应该有效：

$(".getButtonValue").click(function () {
  $("input[type=text]").each(function(){
    console.log("Input box" + i + " contains " + this.value);

    // Validation here
  });
});

修改

通过验证：

$(".getButtonValue").click(function () { var textboxValues = []; $("input[type=text]").each(function(i){ var fieldVal = (this.value === "")? "blank" : this.value; console.log("Field " + i + " contains " + fieldVal) if(fieldVal !== "blank"){ textboxValues.push(this.value.toLowerCase()); if ($.inArray(fieldVal, textboxValues) != -1){ alert("Field " + i + " contains a duplicate value!"); } } }); });

Answer 2

这是您的工作代码

由于ID不同，第一个文本框没有涉及循环..

http://jsfiddle.net/xvRpv/

 $(".getButtonValue").click(function () {
    var msg ='';
    for(i=0; i<=counter-1; i++){
      msg += "\n customFieldValue #" + i + " : " + $('#customFieldValue'+i).val();
    }
       //alert($('#customFieldValue1').val());
        alert(msg);
     });

Answer 3

试试这个伙伴。希望你对此有所了解：）

$('.code').each(function(){
        var $this = $(this);
        //console.log($(this).val()); //Gets you each fields value
        $('.code').not($this).each(function(){
               if ( $(this).val()==$this.val()) {duplicate=true;}
        });
});

 if(duplicate) {
     alert('entries are similar');
  }else{
     alert('all entries different')
  }

我做了一个小提琴

http://jsfiddle.net/82qC8/

在使用jQuery提交时获取动态生成的文本框的值并验证所有文本框

3 个答案: