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

ダイアログ ボックスを使用した 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 サイトの他の関連記事を参照してください。