ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でフォームの送信を停止して前のページに戻るにはどうすればよいですか?

JavaScript でフォームの送信を停止して前のページに戻るにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2025-01-03 16:24:40899ブラウズ

How Can I Stop a Form Submission in JavaScript and Return to the Previous Page?

JavaScript でのフォーム送信の停止

JavaScript 関数を使用してフォームを検証し、前のページに戻ろうとすると、意図にもかかわらず送信が依然として発生する問題。これは、いくつかの簡単な手順で解決できる一般的な問題です。

元の質問で言及されているアプローチの 1 つは、フォーム検証が失敗したときに returnToPreviousPage() という名前の関数を呼び出すことです。ただし、フォームがすぐに送信された場合、この関数は実行されない可能性があります。

これを防ぐには、JavaScript 関数に渡されるイベント オブジェクトでPreventDefault() メソッドを使用できます。このメソッドは、イベントのデフォルトのアクション (この場合はフォームの送信) を停止します。

これは、returnToPreviousPage() 関数と一緒にPreventDefault() を使用する方法の例です。

<form onsubmit="event.preventDefault(); returnToPreviousPage();">
    ...
</form>

あるいは、JavaScript 関数の戻り値を使用してフォームの送信を制御することもできます。検証関数が false を返した場合、フォームは送信されません。

function validateMyForm() {
    // Perform validations
    if (all validations pass) {
        return true;
    } else {
        alert("Validation failed");
        returnToPreviousPage();
        return false;
    }
}

上記の提案を実装した後でもフォームの送信を妨げる問題が発生した場合は、イベント オブジェクトの returnValue プロパティを false に設定してみてください。 。この方法は、古いバージョンの Chrome でサポートされています。

function validateMyForm() {
    // Perform validations
    if (all validations pass) {
        return true;
    } else {
        alert("Validation failed");
        event.returnValue = false;
        return false;
    }
}

これらの手法を実装すると、検証が失敗した場合にフォームの送信を効果的に停止し、前のページに戻ることができ、スムーズでユーザー フレンドリーなエクスペリエンスを確保できます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。