Question

我需要动态创建和提交HTML表单。

我将许多表单连接成一个AJAX请求，所以我克隆它们并通过jQuery发送。链接中的代码显示不工作的部分。问题是jQuery正在发送原始HTML代码而不是生成/用户更改代码。

我错了什么？ http://ajax.dev.brown.sk/test1.html

整个例子：

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function(){
            $("form").submit(function(){

                // copy inputs and take it to form element
                $clone = $(this).clone(true,true);

                // display the code to below
                $("pre:first").text($clone[0].outerHTML);


                // ajax form submit
                $.post("/post.php", $clone.serialize(), function(data){
                    // data contains output of <?php print_r($_POST) ?>
                    $("pre:last").text(data);
                });

                return false;
            });
        });
        </script>
    </head>

    <body>

        <form>
            <select name="select">
                <option value="a">aaa</option>
                <option value="b" selected="selected">bbb</option>
                <option value="c">ccc</option>
            </select>
            <input type="submit" />
        </form>

        <hr />
        <pre></pre>

        <hr />
        <pre></pre>

    </body>
</html>

修改

我认为问题在于克隆形式的序列化。检查此示例：

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function(){
            $("form").submit(function(){

                // copy inputs and take it to form element
                $clone = $(this).clone();

                // display the serialized values below
                $("pre").text($clone.serialize());

                return false;
            });
        });
        </script>
    </head>

    <body>

        <form>
            <select name="select">
                <option value="a">aaa</option>
                <option value="b" selected="selected">bbb</option>
                <option value="c">ccc</option>
            </select>
            <input type="submit" />
        </form>

        <pre></pre>

    </body>
</html>

Answer 1

您需要对委托做出响应，因为它不是初始DOM

$(document).ready(function(){
            $("form").on('submit',function(){

                // copy inputs and take it to form element
                $clone = $(this).clone(true,true);

                // display the code to below
                $("pre:first").append($clone[0].outerHTML);


                // ajax form submit
                $.post("/post.php", $clone.serialize(), function(data){
                    $("pre:last").append(data);
                });

                return false;
            });
        });

修改

你只是得到了外部HTML，你需要一切

$(document).ready(function(){ $("form").on('submit',function(){ // copy inputs and take it to form element $clone = $(this).clone(true,true); // display the code to below $("pre:first").append($clone); // ajax form submit $.post("/post.php", $clone.serialize(), function(data){ $("pre:last").append(data); }); return false; }); });

我希望这可以帮助:)

如何使用当前数据提交jQuery表单的克隆？

1 个答案: