1

我需要动态创建和提交 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>
4

1 回答 1

0

您需要让它响应委托，因为它不是初始 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;
            });
        });

编辑

你只得到outerHTML，你需要一切

$(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;
            });
        });

我希望这可以帮助:)

于 2013-03-04T17:54:53.383 回答