読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

submitをキャンセルする


とある処理を書いていて、「submitボタンを押しても、POSTしない」ようにしたくなりました。

とりあえずやってみた(for IE)

とりあえずググらないで自力で頑張ってみたところ、IE限定ですが

var submitInputElem = document.getElementById(...);

submitInputElem.onclick = function() {
    if (isSubmitAllowed()) {
        submitInputElem.disabled = false;
    } else {
        submitInputElem.disabled = true;
        alert("submitはできません!");
    }
};

と書けばいいことが判明。


このことからわかるのは、onclickは実際に『ボタンが押された』と判定される前に発生するイベントだということ。
なるほど。

とりあえずやってみた(for Firefox

Firefoxは、上記のやり方ではダメだったので、強引に次のようにしてみました。
typeの値をbuttonに変えて、サブミットできないようにするという荒業です。


ただしこれは、IEでは使えません。IEではtypeプロパティの値を変えることが
許可されていない(セキュリティ上の理由?)からです。

var submitInputElem = document.getElementById(...);

submit.type = "button";

submitInputElem.onclick = function() {
    if (isSubmitAllowed()) {
        submitInputElem.type = "submit";
    } else {
        alert("submitはできません!");
    }
};

教えて!Google先生!

ググってみたところ、formのonsubmitに、falseを返す関数をセットしてやればいいらしいです。

var submitFormElem = document.getElementById(...);

submitFormElem.onsubmit = function() {
    //submitが許可されたときのみtrueを返す
    if (isSubmitAllowed()) {
        return true;
    } else {
        alert("submitはできません!");
        return false;
    }
};


これはIEでもFirefoxでも動きます。

一方Chrome

Chromeは、disabled=trueにする方法とtype="button"にする方法のどちらでも動くようです。