0

私は ajax を使用して、2 つのフォームを送信できるようにしています。

カートに追加するフォームとカートを更新するフォームの両方が同じページにあります。

次のコードを使用して、カートへの追加またはカートの送信の更新をトリガーしています。

$('#cart-container').on('submit','form',function() {
    $(this).ajaxSubmit({
        success: cart
    }); 
    return false; 
});

function cart() {
    var path = '/enter/embed-cart';
    $('#cart-container').fadeTo('fast', 0.5).load(path, function() {
        $('#cart-container').fadeTo('fast', 1);
    }); 
}

ajax を無効にして両方のフォームをテストしましたが、完全に機能するため、フォームが正しく機能していることがわかります。

スクリプトを使用すると、カートへの追加フォームは正しく機能しますが、更新フォームは送信されません。奇妙なことに、関数 cart() は実行されていますが、load() が完了してもフォームは更新されていません。div #cart-container 内に 2 つのフォームがあるのは、最初のフォーム (カートに追加するフォーム) のみを対象とすることを意味するのでしょうか?

なぜこれが起こるのか誰にもわかりますか？

これは、削除された HTML です。フォームは CMS からのものであるため、あまり意味がありません。

<div id="cart-container" class="divide clearfix">
    <div id="purchase-submissions" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >
            <input type="submit" value="Add" class="cart-btn add-item">
        </form>

    </div> <!-- End of .grid -->

    <div id="cart" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >

            Update form details

        </form> 

    </div> <!-- End of .grid -->

</div> <!-- End of #cart-container-->

ありがとうございました

4

3 に答える 3

1

通常の送信でフォームが更新される理由は、ページ (フォーム) のコンテンツを更新しているためです。フォームを div に配置し、その div 内から投稿してから、その div を更新して同じものを表示する必要があります。結果。ajaxForm は舞台裏でコンテンツを送信しますが、フォームを「更新」しません。これを実現するには、フォームとスクリプトをページに配置し、それをコンテナー div に呼び出して、その div 内で送信を行い、その後 div を更新します。ajaxFormの「ターゲット」メソッドを調べてください。

Malsup サイトから:

// DOM の準備ができたらフォームを準備します $(document).ready(function() { var options = { target: '#output2', // サーバーの応答で更新されるターゲット要素 beforeSubmit: showRequest, / / 送信前のコールバックの成功: showResponse // 送信後のコールバック

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
}; 

// bind to the form's submit event 
$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

});

実際の例を作成する必要がある場合は、お知らせください。

于 2013-05-29T12:44:41.830 に答える
0

フォームにIDが必要であり、それぞれの基本ごとに個別のjquery呼び出しが必要です。div を送信しようとしています。

送信はフォームにバインドする必要があるため、「#cart-container form」を呼び出すこともできます。

于 2013-05-29T12:11:05.443 に答える
0

Ever considered using jQuery Forms Plugin? It will surely save you from doing such things manually.

于 2013-05-29T11:42:36.177 に答える