1

そのため、ウェブサイトには多くのフォームがあり、残念ながら送信に時間がかかります。

私がやりたかったのは、送信ボタンの送信時またはオンクリック時に送信ボタンを読み込みインジケーターに置き換えてから、フォーム送信アクションが行うリダイレクトに従ってフォームを送信する汎用スクリプトを作成することでした。

jQuery を使用してフォーム送信のボタンを置き換えると、送信ボタンは置き換えられませんが、フォームは送信されます。.click() で実行することにしました。これにより、読み込みインジケーターが送信ボタンを置き換えますが、フォームは送信されません。また、送信ボタンを置き換えてから setTimeout を設定し、送信ボタンの親を jQuery submit() 関数で送信しようとしましたが、すべて役に立ちませんでした。

私はまた、AJAX 提出などの道をたどりましたが、それぞれに独自の問題があります。

現在、私のコードは次のとおりです。

$("#content form :submit").click(function(data) {
    $(this).replaceWith('<img src="loader.gif" alt="submitting form" style="display:block; margin:0 auto">');
    var form = $(this).parent("form");
    setTimeout(function() {
        console.log(form);
        form.submit();
    },1000);    
});

私はこの現在のコードが間違っていることを知っていますが、90% を得るために非常に多くの異なる解決策を経験したので、私はそれを失いました. これを行う方法に関する提案はありますか？

編集：申し訳ありませんが、私が最初に提出したとき、これは十分に明白ではなかったと思います. 送信時に、少なくとも Safari では DOM が更新されなくなりました。アクションは発生しますが、DOM は変更されず、送信が発生します。その結果、フォームは通常どおり送信され、gif の読み込みは行われません。DOM が更新されるまで実際のフォームの送信を遅らせれば修正されると思いましたが、送信されていないようです (1000 は長いですが、最初に機能させたいと考えています)。また、クリックではなく送信時にリスナーを配置して、submit() を呼び出そうとすると、無限ループが発生します。

4

2 に答える 2

3

ハンドラーを送信ボタンのsubmitイベントではなく、フォームのイベントにバインドする必要があります。click

$("#content form").submit(function(e) {
    var $this = $(this);
    $('<img />', {
        'src': 'loader.gif',
        'alt': 'submitting form',
        'class': 'loading',
        'style': 'display: block; margin: 0 auto;' // Use a class instead
    }).appendTo(this);

    $this.find(':submit').hide();

    e.preventDefault();

    $.ajax({
        type: $this.attr('method') || 'get',
        url: $this.attr('action') || window.location,
        data: $this.serialize(),
        success: function(response) {
            $(this).find('.loading').remove();
            $(this).find(':submit').show();
        }
    });
});
于 2012-11-14T01:25:20.367 に答える
2

送信入力を削除するのではなく、非表示にすることができます。タイムアウトなどを使用するよりもずっときれいに思えます。

​$('form').on('submit', function(e){
    var submitButton = $(this).find('input[type=submit]');
    $(this).append('<span>submitting...</span>');//Replace with whatever you want
    submitButton.css('display', 'none');
});​​​​​

http://jsfiddle.net/g7GgU/

于 2012-11-14T01:36:10.437 に答える