Question

如果添加的任何文本输入/ Box都是空的，那么页面就不能提交。当我尝试使用它们的id从文本输入中检索值时，没有检索到任何内容可以从动态添加的元素中检索值吗？

 $("#submit").click(function (event) {
                var string = "tb";
                var i;
                for (i = 1; i <= count; i++) {
                    if (document.getElementById(string+1).value=="") {
                        event.preventDefault();
                        break;
                    }
                }
            });

以上代码是我用来从 id

获取文本字段中的值的代码

Answer 1

我看了一下JSFiddle中的代码。看来输入文本框没有给出预期的ID; ID被提供给容器div。

添加按钮的代码应使用此

var inputBox = $('<input type="text" id="td1">') //add also the needed attributes
$(containerDiv).append(inputBox);

Answer 2

在小提琴上查看此解决方案：http://jsfiddle.net/R89fn/15/

var count = 0;
$(document).ready(function () {

    $("#b1").click(function () {
        if (count == 5) {
            alert("Maximum Number of Input Boxes Added");
        } else {
            ++count;
            var tb = "tb" + count;
            $('#form').append("<div class=\"newTextBox\" id=" + tb + ">" + 'InputField : <input type="text" name="box[]"></div>');
        }
    });

    $("#b2").click(function () {
        if (count == 0) {
            alert("No More TextBoxes to Remove");
        } else {
            $("#tb" + count).remove();
            --count;
        }
    });

    $("#submit").click(function (event) {
        var inputBoxes = $('#form').find('input[type="text"]');;

        if (inputBoxes.length < 1) {
            alert('No text inputs to submit');
            return false;
        } else {
            inputBoxes.each(function(i, v) {
                if ($(this).val() == "") {
                    alert('Input number ' + (i + 1) + ' is empty');
                    $(this).css('border-color', 'red');
                }
            });

            alert('continue here');
            return false;
        }
    });

});

Answer 3

<form name="form" id="form" action="htmlpage.html" method="POST">
<input type="button" id="b1" name="b1" value="Add TextBox" />
<input type="button" id="b2" name="b2" value="Remove TextBox" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>

<script>
    var count = 0;
    $(document).ready(function() {

        $("#b1").click(function() {
            if (count == 5) {
                alert("Maximum Number of Input Boxes Added");
            } else {
                ++count;
                var tb = "tb" + count;
                $(this).before("<div class=\"newTextBox\" id= "+ tb +" >" + 'InputField : <input type="text" name="box[]"></div>');
            }
        });
        $("#b2").click(function() {
            if (count == 0) {
                alert("No More TextBoxes to Remove");
            } else {
                $("#tb" + count).remove();
                --count;
            }
        });
        $("#submit").click(function(event) {
            var string = "#texttb";
            var i;
            for (i = 1; i <= count; i++) {
            if ($('input[type = text]').val() == "") {
                    event.preventDefault();
                    break;
                }
            }
        });
    });

</script>

<style>
    .newTextBox
    {
        margin: 5px;z
    }
</style>


Reason:

you had given id to the div element. so its not get retrive. i had updated the answer with the usage of jquery functions and changed your code for this requirement.

Answer 4

如果我理解正确，你唯一的问题是确保在其中一个输入为空时不发送表单？似乎您的问题的解决方案更简单。只需在任何输入结束时添加所需的内容，HTML5将确保在空的情况下不发送表单。例如：

<input type="text" required />

从动态添加的元素中获取值

4 个答案: