1

HTML フォームを動的に作成して送信する必要があります。

多くのフォームを 1 つの 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 に答える