0

クリックされたときに HTML フォームの [送信] ボタンを無効にし、そのボタンのテキスト値を変更する最良の方法は何ですか?

4

6 に答える 6

3

誰かが Javascript の onclick イベントを推奨しましたが、代わりにonsubmitを使用することをお勧めします。これはボタンではなくフォーム自体にあり、ボタンを無効にする実際のイベント (送信) と、送信をトリガーする可能性のあるその他のイベントが含まれます。

document.getElementById('FormId').addEventListener('submit',function(){
    var button = document.getElementById('buttonId');
    button.innerText = 'Something new!';
    button.disabled = true;
});

あなたが探していた追加の変更を含めるように私の答えを編集しました（ボタンのテキストも無効になっています）。

もう一度編集: スーパー クロス ブラウザーになりましょう!

var form = document.getElementById('FormId');

function submitForm(){
    var button = document.getElementById('ButtonId');
    button.innerText = 'Something new!';
    button.disabled = true;
}

if(form.addEventListener){
    form.addEventListener('submit',submitForm,false);
} else {
    form.attachEvent('onsubmit',submitForm);
}

これは、IE9 より前のバージョンの IE を対象としています。明らかに、複数のフォームがある場合は、これをもう少し再利用可能にしようとしますが、これが一般的な要点です。

于 2013-10-10T20:00:19.857 に答える
1

これを実現する最善の方法は、JQuery を使用することです。

フォーム送信ボタンに id="submitButton" があるとします。したがって、このスクリプトをページ ヘッドに追加し、ダウンロードした JQuery および JQuery-UI スクリプトを配置した場所を参照してください。

<script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>

<script>
    function submitButton_OnClick() {
        $("#submitButton").text("New Text");
        $("#submitButton").attr("disabled", "disabled");
     }

    $(document).ready(function() {
        $("#submitButton").click(submitButton_OnClick);
    });

</script>

そしてこれをあなたのhtmlに

<button id="submitButton">test</button>

動作確認！

于 2013-10-10T20:07:42.927 に答える
0

onclickイベントを追加し、JavaScript 関数を実装して、必要なことを行うことができます。JavaScript からボタンを無効にする方法については、こちらを参照してください。JavaScript を使用してボタンのテキストを変更する方法の例については、こちらもご覧ください。

于 2013-10-10T19:56:46.093 に答える
0

onclick 属性を使用して、disabled 属性を設定できます。フォームの送信が完了したときにボタンを再度有効にする方法については説明しないことに注意してください。

<button type="submit" onclick="this.setAttribute('disabled', 'disabled');">Submit</button>

このフィドルでここのライブ例を参照してください。

http://jsfiddle.net/yinkadet/DPJGw/

これが役立つことを願っています

于 2013-10-10T20:07:30.990 に答える
0

クリックイベントを使用JavaScriptして設定する必要があります。たとえば、次のようにする必要があります。

HTML:

input type="button" value="value" id="1" onClick="OnClick(this.id)"/>

JavaScript:

function OnClick(id)
{
    //some stuff...
}

またjQuery、送信時に使用してキャッチすることもできます。次に例を示します。

$("form").on('submit',function(event)
{
    event.preventDefault();
    //some stuff...
}
于 2013-10-10T19:59:59.120 に答える