動態創建表單並提交

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)因為變量form包含包裝在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小提琴： http ： //jsfiddle.net/ashishanexpert/y99mt/2/

我已經通過jquery創建了HTML節點，而不僅僅是HTML字符串。 將事件附加到節點比先將字符串轉換為HTML然后再將事件附加到節點要容易。 希望你喜歡。