动态创建表单并提交

Question

所以我在plugin.js中有一个我在下面写的jQuery插件。我希望每次创建时都能通过JSON / AJAX提交表单。

(function ( $ ) {
    $.fn.create = function() {
        var form = '<div id="form" class="container">';
        form += '<div>User Login</div>';
        form += '<form action="/create/one" method="post">';
        form += '<input type="text" name="name" placeholder="name">';
        form += '<input type="email" name="email" placeholder="email">';
        form += '<button type="submit">Login</button>';
        form += '</form>';
        form += '</div>';
        $('#form').submit(function(e)
        {

            var postData = form.find('form').serializeArray();
        if(postData.name === "someREGEXstring" || postData.email === "someREGEXstring") {
        console.log("empty inputs not cool");   
        }
    var formURL = $('form').attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {

        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
        }
    });
    e.preventDefault(); //STOP default action
});

$('#form').submit(); //SUBMIT FORM

        return this.append(form);
    };
}( jQuery ));

在HTML视图中

<div id="newForm"></div>

<script>
$(document).ready(function(){
    $("#newForm").create(); 
});
</script>

这是正确的方法吗？或者我应该：

1. 在AJAX部分的同一文件下创建另一个命名空间
2. 在AJAX部分的不同文件下创建另一个命名空间

Answer 1

这应该有效：

(function ( $ ) {
    $.fn.create = function() {
        var form = '<div id="form" class="container">';
        form += '<div>User Login</div>';
        form += '<form action="/create/one" method="post">';
        form += '<input type="text" name="name" placeholder="name">';
        form += '<input type="email" name="email" placeholder="email">';
        form += '<button type="submit">Login</button>';
        form += '</form>';
        form += '</div>';
        form = $(form);
        form.submit(function(e) {
            var postData = form.find('form').serializeArray();
            var formURL = form.find('form').attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {

                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                }
            });
            e.preventDefault(); //STOP default action
        });
        form.submit(); //SUBMIT FORM

        return this.append(form);
    };
}( jQuery ));

以下是JSFiddle中的演示。

修正了什么：

1. form = $(form)用于根据form字符串创建DOM元素。
2. 更改postData，formURL初始化的方式。

Answer 2

如果问题纯粹是关于如何安排代码，我建议你完全从代码中提取表单模板，使你的插件更加灵活。

• 选项1.在页面中将表单创建为模板并传递 模板选择器作为选项插件
• 选项2：将模板传递给插件

以下是第一种技术的示例：http://jsfiddle.net/TrueBlueAussie/c8bmw/7/

HTML中的

模板：

<script id="template" type="template">
    <div id="form" class="container">
        <div>User Login</div>
        <form action="/create/one" method="post"/>
            <input type="text" name="name" placeholder="name"/>
            <input type="email" name="email" placeholder="email"/>
            <button type="submit">Login</button>
        </form>
    </div>
</script>

使用：

创建

$(document.body).create('#template');

插件简化为：

(function ( $ ) {
    $.fn.create = function(template) {
        form = $($(template).text());
        form.submit(function(e) {
            // This is the actual form object now
            var $form = $(this).find('form');
            // Test contents of form here

            // If values are correct proceed with Ajax call
            var postData = $form.serializeArray();
            var formURL = $form.attr("action");
            $.ajax(
            {
                url : formURL,
                type: "POST",
                data : postData,
                success:function(data, textStatus, jqXHR) 
                {

                },
                error: function(jqXHR, textStatus, errorThrown) 
                {
                }
            });
            e.preventDefault(); // Stop default action
        });
        return this.append(form);
    };
}( jQuery ));

现在您的插件代码可以使用任何形式。

根据您的评论，我删除了表单的自动提交，因为没有意义

Answer 3

<div id="#newForm"></div>

应该是

<div id="newForm"></div>

加载此表单元素

Answer 4

我有一些问题，比如：

• $('#form').submit(function(e)应为$(form).submit(function(e)，因为变量形式包含DIV中包含的所有表单HTML。
• 在提交表单时，$(this)将引用表单元素本身。

以下是修改后的代码：

(function ($) {
    $.fn.create = function () {
        var formContainer = $("<div />", {
            id : "form",
            class : "container"
        }).append("<div>User Login</div>");

        var form = $("<form />", {
            action: "/create/one",
            method : "post",
            submit : function(e){
                var actionUrl = $(this).attr("action");

                alert(actionUrl); // just to check if this is working or not

                $.ajax({
                    url : actionUrl,
                    type : "POST",
                    data : $(this).serializeArray(),
                    success : function (data, textStatus, jqXHR) {},
                    error : function (jqXHR, textStatus, errorThrown) {}
                });
                e.preventDefault();
            }
        })
            .append('<input type="text" name="name" placeholder="name"><input type="email" name="email" placeholder="email"><button type="submit">Login</button>')
            .appendTo(formContainer);

        return this.append(formContainer);
    };
}(jQuery));

$("#test").create();

用于测试的HTML：

<div id="test"></div>

JS fiddle: http://jsfiddle.net/ashishanexpert/y99mt/2/

我已经通过jquery而不仅仅是HTML字符串创建了HTML节点。将事件附加到节点比首先将字符串转换为HTML然后将事件附加到它们更容易。希望你喜欢它。