フォームボタンによるページの更新を停止するにはどうすればよいですか?

フォーム ボタンによるページ更新の防止

ボタンを含むフォームを作成する場合、ボタンのクリックによって不要なページが更新されるという問題がよく発生します。これは、特に更新時にリセットされる動的に読み込まれるデータがページに含まれている場合に問題となる可能性があります。

問題の説明

提供されたコード スニペット内:

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

ボタンをクリックすると getData() 関数が呼び出されますが、ページも自動的に更新されます。これは、フォーム内のボタンのデフォルトのタイプが「送信」であるために発生します。これにより、フォームの送信が開始され、ページがリロードされます。

解決策

ページの更新を防ぐには、次のようにボタンの type 属性を「button」に変更します:

<button name="data" type="button" onclick="getData()">Click</button>

type="button" を設定すると、ボタンフォーム送信を開始しなくなりました。代わりに、ページに影響を与えることなく、指定された onclick イベントのみをトリガーする通常のボタンのように動作します。

説明

type 属性は、ボタンのタイプを定義します。可能な値は次のとおりです:

• submit: フォームを送信します。これはデフォルト値です。
• reset: フォームを初期状態にリセットします。
• button: 送信または送信せずにカスタム ボタンとして機能します。フォームをリセットします。

type="button" を設定すると、ボタンを効果的に変換します。ページを更新せずに、目的の JavaScript 関数を単にトリガーする非送信ボタン。

以上がフォームボタンによるページの更新を停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。