js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交

一、在动态上传章节信息时，碰到了一系列的问题，主要有：

1、动态添加的input元素绑定的事件失效了。

2、提交保存时，多个name相同的表单如何判空并阻断提交。

二、问题界面展示：

（1）在这个页面中，第一个form表单，是开始就有了，第二个是点击按钮后动态添加的，它的判断是否为空是无效的。

三、问题出现的原因：

1、为了完成业务，我最初在html中我写了一个form表单，和一个增加按钮。

 <button class="btn btn-primary btn-block" onclick="addchapter()">增加章节</button>
                    <form  action="/savechaptername" method="post" id="myform">
                        <p></p><p></p>
                        <input type="hidden" name="courseid" th:value="${course.getCourseid()}">
                        <div class="box">
                            <div class="box-header with-border">
                                <h3 class="box-title">请输入每章章节标题(从上往下依次是第1章->第n章)</h3>
                                <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="remove"
                                            data-toggle="tooltip" title="Remove" >
                                        <i class="fa fa-times"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">章节名：</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control"  placeholder="请输入章节名" name="chaptername"
                                               ><span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box -->
                            <button type="submit" class="btn btn-primary btn-block" th:id="myform1" onclick="save()">提交保存</button>
                    </form>

（2）每点击一次按钮会增加一个章节输入框，这种动态添加可以通过使用js的append（）方法实现，在idea中，我直接复制上面的html代码，粘贴进入append方法中，他会自己转义，特别方便。代码如下：

 function addchapter() {
        $("#myform1").before("<div class=\"box\">\n" +
            "                            <div class=\"box-header with-border\">\n" +
            "                                <h3 class=\"box-title\">请输入每章章节标题(从上往下依次是第1章->第n章)</h3>\n" +
            "\n" +
            "                                <div class=\"box-tools pull-right\">\n" +
            "                                    <button type=\"button\" class=\"btn btn-box-tool\" data-widget=\"remove\"\n" +
            "                                            data-toggle=\"tooltip\" title=\"Remove\" onclick=\"remove(this)\">\n" +
            "                                        <i class=\"fa fa-times\"></i></button>\n" +
            "                                </div>\n" +
            "                            </div>\n" +
            "                            <div class=\"box-body\">\n" +
            "                                <div class=\"form-group\">\n" +
            "                                    <label  class=\"col-sm-2 control-label\">章节名：</label>\n" +
            "\n" +
            "                                    <div class=\"col-sm-10\">\n" +
            "                                        <input type=\"text\" class=\"form-control\" name=\"chaptername\"  placeholder=\"请输入章节名\"\n" +
            "                                               >\n" +
            "                                    <span></span></div>\n" +
            "                                </div>\n" +
            "                            </div>\n" +
            "                        </div>");
    }

（3）每个输入框都带有判断不为空的事件。开始写的时候这样写，结果就出现了刚才所遇到的问题。新增的input表单事件无效。

 $("[name=chaptername]").blur(function () {
        if ($(this).val() != "") {
            $(this).next().text("");
        } else {
            $(this).next().text("不能为空").css("color", "red");
        }
    });

四、解决方案

1、之所以会出现刚才的问题，是因为在事件加载之后我们才动态添加元素，新的元素并没有绑定到曾经的事件。解决方案：

（1）绑定事件需要等元素添加完毕，再绑定，才会生效。用on方法可以实现，代码如下：

 $(document).on("blur","[name=chaptername]",function () {
        if ($(this).val() != "") {
            $(this).next().text("");
        } else {
            $(this).next().text("不能为空").css("color", "red");
        }
    });

（2）扩展：要是我们用的框架的js，比如添加的表单，不需要可以点击×号删除，要想实现效果，但不知道怎么做的时候，我们可以自己写点击事件，不用框架的，因为我们无法把握人家的js，这只是本人的一种思路，会的不用理会。在此处，我需要实现可以把动态添加的表单删除，我在添加时都加了remove（）方法，每次点击，它会自己调用完成操作。

    function remove(a) {
        $(a).parents(".box").fadeTo("slow", 0.01, function(){
            $(this).slideUp("slow", function() {
                $(this).remove();
            });
        });
    }

2、至于如何在保存前判断name相同的表单都不为空

（1）我给提交按钮添加了点击事件save（）。

（2）在form的action右边添加了id为myform。

（3）定义一个初始值i，记录为空的个数。

（4）使用each函数循环遍历name相同的表单，遍历时，判断是否符合，有不符合的i值加1。

（5）遍历完成后，判断i值，大于0说明不符合，阻断提交。

3、具体实现如下，可以参考一下。

//保存相同name的值阻断提交
    function save() {
        var i=0;
        $("input[name='chaptername']").each(function(){
            if($(this).val()==""){
                i=i+1;
            }
        });
        if (i>0) {
            $("#myform").bind("submit", (function (e) {
                e.preventDefault();
            }));
            confirm("输入的信息有误，请重新检查");
        } else {
            var r=confirm("确认保存？");
            if(r==true){
                $("#myform").unbind("submit");
            }
        }
    }

4、最终我们达到了需要的效果，新增的表单事件有了，也可以在多name相同表单下阻断提交。如图所示：

五、以上是关于该类问题的解决思路，更多内容欢迎关注博主的公众号，进行交流。