javascript - PHPで送信後に送信ボタンを無効にする方法は?

Question

この問題に関する他の質問を参照しましたが、満足のいく答えが見つかりませんでした。ユーザーが 4 つのオプションからオプションを選択して [送信] をクリックするクイズ Web サイトがあります。一度クリックした送信ボタンを無効にしたい。

PHPでこれを行う方法はありますか？そうでない場合、最小限の JS でこれを行う方法はありますか。

Answer 1

利用可能なソリューション

質問jQueryにタグを付けたので、使用できるいくつかの簡単なjQueryソリューションを次に示します。
クリックされたときに無効にするには、次のようにします。

$('input[type="submit"]').click(function() {
    this.disabled = true;
};

ただし、フォームが送信された後にのみ無効にすることができます。

$("form").submit(function() {
    $(this).find('input[type="submit"]').prop("disabled", true);
});

ソリューションのデモ

jsFiddle での上記のロジックの簡単なデモを次に示します: http://jsfiddle.net/zb8CZ/
(その実装では、jQuery を使用せず、プレーンな JS を使用したことに注意してください。ただし、ブラウザー間での移植性のためにも同様です) jQuery が提供する他の多くのメソッド (およびシンタックス シュガー!) へのアクセスとして、jQuery メソッドをお勧めします。

注意してください...

JS イベント処理を HTML にインラインで (onsubmit="..."またはonclick="..."属性を使用して) 実装しようとすることは、レイアウト/表示レイヤーで機能を混乱させるため、悪い習慣と見なされることに注意してください。また、エディターが提供する構文の強調表示やエラー チェックが失われ、コードに論理的な順序がないため、アプリケーションの開発と保守が一般的に難しくなります。

Answer 2

非常に簡単なJavaScriptのみの方法

<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
   onclick="this.disabled='disabled';this.form.submit();" />
</form>

Answer 3

最近の一般的な方法は AJAX を使用することですが、これは質問の答えにはなりません。たとえば、次のようなフォームがあるとします。

<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit">Submit</button>
</form>

処理のために PHP ファイルに送信するときは、フォーム データを介して$_GET、または$_POST必要な処理を行ってフォーム データにアクセスします。この時点で、フォームが送信されたかどうか、またはフォームが成功したかどうかを推測できます。これに基づいて、属性を持つ要素inputまたはbutton要素にフラグを立てることができます。基本的な例を次に示します。disabled

<?php # foo.php 
    $myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : '';
    echo "You submitted: {$myVariable}\n"; // do something useful...

    // if variable is not an empty string, ie. it has been submitted,
    // set $disabled which can then be output in-line with your HTML
    $disabled   = ($myVariable != '') ? 'disabled' : '';
?>
<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit" <?php echo $disabled; ?>>Submit</button>
</form>

これにより、条件に基づいてボタンが無効になった新しいフォームが出力されます。またdoctype、有効なマークアップと見なすには、属性に値を指定する必要がある場合もありますが、一般的には次のようになります。

<!-- valid HTML5 -->
<button disabled>button</button>

<!-- valid XHTML -->
<button disabled="disabled">button</button>

---

関連する StackOverflow の読み物:

Doctype とは何ですか?
とは?:どういう意味ですか? (三項演算子)
PHP: AJAX 経由でフォームを送信するにはどうすればよいですか (jQuery バージョン)

Answer 4

コードを残します：

    <form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">

<!-- form elements here -->

</form>

Answer 5

このように書き込みを無効にするには、一度クリックすると無効になります。

<input type="submit" id="but_sub" name="submit" \>


    $("#but_sub").click(function() {
        $(this).attr("disabled",true);
    }

また

    $('#but_sub').click(function() {
        $(this).attr("disabled","disabled");
    }

Answer 6

これを試して。AJAX 経由でバックエンド作業を実行する PHP ファイルに、各回答の値を渡したい場合があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
    $('#question').submit(function(){
       //Get the value of the answer that was checked
       var answer = $('input:radio[name=question_one]:checked').val();

       //Use jQuery's AJAX function to send the data to a PHP file that does backend work 
       $.ajax({  
          type:'POST',  
          url:'quiz_backend.php',  
          data:'answer='+ answer,
          success: function() {
              //Hide the submit button upon successful submission
              $('#submit').attr("disabled", true);
              event.preventDefault();
          }
       });
    });
</script>

<form id="question">
   <input type="radio" name="question_one" value="answer_one">A<br />
   <input type="radio" name="question_one" value="answer_two">B<br />
   <input type="radio" name="question_one" value="answer_three">C<br />
   <input type="radio" name="question_one" value="answer_four">D<br />

   <input type="submit" value="submit" id="submit"/>
</form>

jQuery の AJAX 呼び出しの詳細については、こちらをご覧ください。

Answer 7

以下のコードで試してみてください。お役に立てば幸いです...

    $('#contact-form').submit(function () {
        if ($(this).valid()) {
            $('.submit').attr("disabled", true);
        }
    });

Answer 8

ユーザーメッセージ付きの登録ボタンの例:

<input type="submit" onclick="this.disabled=true;this.value='ADD USER MESSAGE...';this.form.submit();" class="ADD BUTTON CLASS HERE" value="Register!">

.sub-btn:hover {
  color: #FFFFFF;
  background-color: #406800;
  border-color: #82B33C;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.sub-btn {
  border-width: 1px;
  border-style: solid;
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 20px;
  margin-left: 0;
  padding: 10px;
  width: 100%;
  color: #f8f8f8;
  background-color: #82B33C;
  border-color: #406800;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.tx-shadow {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}

<input type="submit" onclick="this.disabled=true;this.value='Creating Account, please wait...';this.form.submit();" class="sub-btn tx-shadow" value="Register!">