ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript フォームの送信に確認ダイアログ ボックスを追加するにはどうすればよいですか?

JavaScript フォームの送信に確認ダイアログ ボックスを追加するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-10-29 21:23:02
オリジナル
240 人が閲覧しました

How do I Add Confirmation Dialog Boxes to My JavaScript Form Submissions?

ダイアログ ボックスを使用した JavaScript フォーム送信の確認

フォームを送信するとき、送信する前にユーザーに入力内容を確認するよう求めることが望ましい場合がよくあります。これにより、誤って送信されることを防ぎ、すべての必須フィールドが正しく入力されるようになります。

フォーム送信の確認

フォームを送信する前に確認ダイアログ ボックスを表示するには、JavaScript のconfirm()メソッド。以下に例を示します:

<code class="js">function confirmFormSubmission() {
  if (confirm("Confirm submission?")) {
    // Form submission allowed
  } else {
    // Submission canceled
  }
}</code>
ログイン後にコピー

コードの変更

これをコードに実装するには、show_alert() 関数を次のコードで置き換えます:

<code class="js">function confirmFormSubmission() {
  if (confirm("Are the fields filled out correctly?")) {
    document.form.submit(); // Submit the form
  } else {
    return false; // Cancel submission
  }
}</code>
ログイン後にコピー

インライン JavaScript の確認

フォーム タグ内でインライン JavaScript を使用することもできます:

<code class="html"><form onsubmit="return confirm('Confirm submission?');"></code>
ログイン後にコピー

これにより、外部関数が不要になります。

検証と確認

フォームを送信する前に検証を実行する必要がある場合は、検証関数を作成してフォームの onsubmit イベントで使用できます:

<code class="js">function validateForm(form) {
  // Validation code goes here

  if (!valid) {
    alert("Please correct the errors in the form!");
    return false;
  } else {
    return confirm("Do you really want to submit the form?");
  }
}</code>
ログイン後にコピー
<code class="html"><form onsubmit="return validateForm(this);"></code>
ログイン後にコピー

このアプローチにより、検証と確認を 1 つのステップに組み合わせることができ、フォームが有効で送信を目的としたものであることを確認できます。

以上がJavaScript フォームの送信に確認ダイアログ ボックスを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート