添加和删​​除多个表单域

时间:2017-03-07 06:54:28

标签: javascript jquery

您好我在下面分享我的代码。任何人都可以帮我做一些小改动。在创建新盒子时,添加按钮处于固定位置。我需要让它变得动态。

$(document).ready(
    function () {
        var max_fields = 6;
        var wrapper = $(".items");
        var add_button = $(".add-more");

        var x = 1;
        $(add_button)
            .click(
                function (e) {
                    e.preventDefault();
                    if (x < max_fields) {
                        x++;
                        $(wrapper)
                            .append(
                                '<div class="row add-more1"><div class="col-sm-11"><div class="col-sm-4"><form role="form"><div class="form-group">'
                                + '<select class="full-width form-control"><option value="AK">- Select -</option><option value="AK">Name</option>'
                                + '<option value="HI">Email</option><option value="AK">Contact No.</option><option value="HI">Assigned To</option>'
                                + '<option value="AK">Next Action From</option><option value="HI">Next Action To</option><option value="AK">Status</option></select>'
                                + '</div></form></div>'
                                + '<div class="col-sm-4"><form role="form"><div class="form-group">'
                                + '<select class="full-width form-control"><option value="AK">- Select -</option><option value="AK">=</option>'
                                + '<option value="HI">></option><option value="AK">>=</option><option value="HI"><</option><option value="AK"><=</option>'
                                + '<option value="HI">like</option></select>'
                                + '</div></form></div>'
                                + '<div class="col-sm-4"><form role="form"><div class="form-group">'
                                + '<input type="text" class="form-control input-sm" name="name" placeholder="Enter value"/>'
                                + '</div></form></div></div>'
                                + '<span class="remove_field"><i class="fa fa-times"></i></span></div>');
                    }
                });

        $(wrapper).on("click", ".remove_field",
            function (e) {
                e.preventDefault();
                $(this).parent('div').remove();
                x--;
            })
    });

1 个答案:

答案 0 :(得分:0)

请添加CSS可能是它的工作:

awk '{print}' ORS=' '