投稿ボタンが2回押せてしまう。

Question

現状、投稿するボタンが2回押せてしまうので、onclick="this.disabled = true;"を記載しましたが、まだ2回押せてしまいます。原因がお分かりの方はご教示いただけると幸いです。

(コードを修正)

<button type="button" class="btn" data-ele="finish" onclick="this.disabled = true;">
	投稿する
</button>

(追加)

$(document).on('click', '[data-ele="finish"]', function(e) {
	if ($('#postProjectForm').isValid()) {
		var activeUploads = $('#fileupload').fileupload('active');
		if (activeUploads > 0) {
			toastr["error"]("Uploads are still in progress. Please wait a little more, enjoy a sip of coffee instead.");
		} else {
			submitFormHandlerWithUpload(window.location.href, 'postProjectForm', 'Please wait..',function(data){
			    if(typeof data.redirect != "undefined" || data.redirect != ""){
			        setTimeout(function(){
			            window.location.href = data.redirect;
			        },500);
			    }
			});
		}

	}

});

Comments

[s8_chu]

質問文では説明されていない関数などが使われているようですが、いかがでしょうか？

Answer 1

this.が抜けてます。これを付けないとグローバル変数になってしまいますので。

<button type="button" class="btn" onclick="this.disabled = true;">
投稿する
</button>

---

【追記】

<button type="button" class="btn" data-ele="finish">
投稿する
</button>

$(function () {

    $('[data-ele="finish"]').click(function () {
        if (!$('#postProjectForm').isValid()) {
            return;
        }
        if ($('#fileupload').fileupload('active') > 0) {
            toastr.error('Uploads are still in progress. Please wait a little more, enjoy a sip of coffee instead.');
            return;
        }

        this.disabled = true;

        submitFormHandlerWithUpload(location.href, 'postProjectForm', 'Please wait..', function (data) {
            if (data.redirect != null && data.redirect !== '') {
                setTimeout(function () {
                    location.href = data.redirect;
                }, 500);
            }
        });
    });

});

これでどうですか？依然として見えない部分が多いのでだいぶ推測で書いていますが…

※ 外側の $(function () { ... }); で囲っている部分は、すでにもしこれが存在しているのであれば改めて囲う必要はありません。

※ 一応 data-ele 属性を自分で定義しましたが、ライブラリ側で勝手にボタンに付与してくれるのであればこれも書く必要はありません。

Comments

[rumi]

ありがとうございます。thisを入れてみましたが、2回以上押せてしまいます。

[退会済みユーザー]

confirme 入れるのが一番現実的なんだよなぁ（これも隙間があるが）

[mpyw]

https://jsfiddle.net/m8sgr7ma/ 　↑のソースコピペして動作確認しましたが普通に動きます。再現できないですね…　明らかにほかの部分が影響及ぼしてそうなのでソース全体見ないと何とも言えない感じ

[mpyw]

<button type="button" class="btn" onclick="console.log('クリックされました');this.disabled = true;">
投稿する
</button>

これでデバッグコンソールに「クリックされました」と本当に2回以上表示されていますか？

[rumi]

ありがとうございます。console.logで試したところ、1回だけ「クリックされました」と表示されます。
ただし、この場合は投稿はできないため、ほかの部分(投稿後のリダイレクトなど）が影響してそうですので、現在確認しております。

[rumi]

こちら、関連するJavascriptのコードを追加しました。宜しくお願い申し上げます。