web-dev-qa-db-ja.com

ワンクリック後に送信ボタンを無効にする

これが私のコードです：

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'>
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'>
</form>

Onsubmit関数を実行し、ページを送信したい。私のウェブサイトでは、送信も機能もありません

ここで複製しようとしましたが、フォームが投稿されているようで、関数が実行されません... http://jsfiddle.net/V7B3T/1/

そして、いつボタンを再度アクティブにする必要があるのか​​わかりません。

Document.readyで実行する必要がありますか、それともonSubmit関数で実行する必要がありますか？

だから誰かがフィドルを修正できるなら:)そしてその後私はそれを私のコードと比較します。私は思う：S私は迷子になっている

皆さんありがとう

jquerybuttonsubmitpage-lifecycle
6
GregM

送信する前にフォームを検証したり変更を加えたりして、フォームが有効な場合にのみ送信する場合は、次のようにすることができます。

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data">
    <input type="submit" name="send" id="send" value="Send" title="test">
</form>

およびJavaScriptコード：

$('#frm').bind('submit', function (e) {
    var button = $('#send');

    // Disable the submit button while evaluating if the form should be submitted
    button.prop('disabled', true);

    var valid = true;    

    // Do stuff (validations, etc) here and set
    // "valid" to false if the validation fails

    if (!valid) { 
        // Prevent form from submitting if validation failed
        e.preventDefault();

        // Reactivate the button if the form was not submitted
        button.prop('disabled', false);
    }
});

これが機能しています フィドル 。

15
Bogdan

私は間違いなくそのコードをそれが属する外部JS（およびCSS）ファイルに移動しますが、これは機能するはずです：

_onclick="this.disabled=true;this.parentNode.submit();"
_

送信ボタンonclickを無効にしているため、実際のフォーム送信クリックが発生すると無効になります（onclickはその前に発生します）。ただし、JSでフォームを送信すると、うまくいくはずです。

http://jsfiddle.net/V7B3T/4/

編集：ボタンの再有効化に関しては、OnSubmit()関数が実行された後に発生する必要があると思います。

5
powerbuoy

フォームが実際にポストバックを行う場合は、ページを効果的に変更しているため、ボタンを再度有効にすることを心配する必要はありません（ページが読み込まれると発生します）。

また、jQueryを使用しているので、jQueryを適切に使用し、onclick、onsubmitなどではなくjQuery関数を使用してイベントハンドラーをアタッチすることにより、HTMLマークアップとJavascriptを分離することもできます。 HTML要素の属性。

更新されたHTML：

_<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'>
    <input type='submit' name='send' id='send' value='Send' title='test'>
</form>
_

更新されたJavascript：

_function submitForm(form) {
    alert("submitted");
}

$('#send').click(function(e) {
    this.disabled = true;
});

$('#frm').submit(function(e) {
    submitForm(this);    
});
_

作業中のjsFiddle

実際のページで使用するには、それを$(document).ready(function() {...});呼び出しでラップする必要があります-とにかくjsFiddleが提供されたJavascript onLoadを実行するため、省略しました。

5
Anthony Grist

ページを送信したくない場合は、これでうまくいくはずです。

onclick="this.disabled=true;return false;"
0
Episodex