Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptのフォームの未保存の変更に関するアラート

以下は、JavaScriptでフォームの未保存の変更に関するアラートを表示するコードです-

例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   input {
      margin: 10px;
   }
</style>
</head>
<body onbeforeunload="return pageUnload()">
<h1>Alert for unsaved changes in form</h1>
<form>
Username <input type="text" />
<br />
Password <input type="password" /><br />
<button type="submit">SUBMIT</button>
</form>
<br />
<script>
   function pageUnload() {
      return "The data on this page will be lost if you leave";
   }
</script>
</body>
</html>

出力

JavaScriptのフォームの未保存の変更に関するアラート

リロードボタンをクリックすると、次の警告が表示されます-

JavaScriptのフォームの未保存の変更に関するアラート


  1. JavaScriptテキストアラートについて説明する

    JavaScriptのalert（）関数は、ユーザーにポップアップメッセージを表示するために使用されます。 以下は、JavaScriptのalert（）関数のコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <

  2. ボタンクリックをトリガーし、JavaScriptでフォーム送信時にアラートを生成します

    次がボタンだとしましょう- <button id="submitForm">Submit</button> ボタンIDに基づいて、フォームの送信時にアラートを生成します- $("#submitForm").click(function() {    alert("The Form has been Submitted."); }); 例 <!DOCTYPE html> <html lang="en"> <head> <meta