<p>ユーザー名を取得するための単純なフォームがあり、次のことを実現したいと考えています: </p>
<li>ユーザーがボタンをクリックすると、複数回のクリックを防ぐためにボタンが無効になります (実際の場合、API の呼び出しやデータベースへの書き込みなど、すべてのデータを処理するのに数秒かかる場合があります)。 </li>
<li>クリック後、PHP で $_POST['username'] をキャプチャし、リクエストをさらに処理するために、新しい POST リクエストを発生する必要があります。 </li>
</ul>
<p>この目標を達成するにはどうすればよいですか? </p>
<p>コードは次のとおりですが、期待どおりに動作しません: </p>
<pre class="brush:php;toolbar:false;"><?php
セッション開始();
// フォーム送信時にフォームデータを処理します
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST['送信ボタン'])) {
$uname=$_POST['ユーザー名'];
header('場所: success.php');
}
}
?>
<!DOCTYPE html>
<html>
<頭>
<title>マイフォーム</title>
</head>
<本体>
<フォーム ID="your_form_id" アクション="test4.php" メソッド="post">
<p><label>ユーザー名</label>
<input id="ユーザー名" type="text" name="ユーザー名" value=""autofocus/></p>
<input type="submit" id="submit-button" name="submit" value="Login" />;
</フォーム>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<スクリプトタイプ="text/javascript">
$("#submit-button").on("click", function(e){
document.getElementById("送信ボタン").disabled = true;
document.getElementById("送信ボタン").value="処理中です。お待ちください...";
document.getElementById("your_form_id").submit();
});
</スクリプト>
</ボディ>
</html></pre></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
JQuery ライブラリを使用していますが、ボタンと submit() を処理するためにネイティブ JavaScript コマンドを使用しています。すべて Pure JS にするか、すべて JQuery にするかのどちらかです。
以下のコードは JQuery のみを使用します。さらに、submit をボタンに置き換えました。
。 最後に、ボタンは POST されないため、テストが必要な場合は入力フィールドで実行してください。
以下は、先ほど述べた役立つ要素を含むコードです。
リーリーこれを達成するには、次の原則を使用できます:
test-a.php:
リーリーtest-b.php:
リーリーtest-c.php:
リーリー