document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <html>
  2. <head>
  3.     <title>JQuery</title>
  4.     <style type="text/css">
  5.         * {
  6.         padding: 2px;
  7.         }
  8.         .container {
  9.         display: flex;
  10.         justify-content: center;
  11.         align-items: center;
  12.         flex-direction: column;
  13.         height: 100vh;
  14.         }
  15.         .form {
  16.         padding: 1rem;
  17.         background-color: bisque;
  18.         }
  19.     </style>
  20.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"
  21.    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  22.    crossorigin="anonymous"
  23.    ></script>
  24.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
  25. </head>
  26. <body>
  27.     <div class="container">
  28.         <button id="toggle_form">toggle form</button>
  29.         <div id="form" class="form" style="visibility: hidden;">
  30.             <h1>List Buku</h1>
  31.             <div>
  32.                 <label>Judul Buku : </label>
  33.                 <input type="text" id="title" name="title" class="form-control" />
  34.             </div>
  35.             <div>
  36.                 <label>Buku :</label>
  37.                 <select id="list">
  38.                 <option value="">list</option>
  39.                 </select>
  40.             </div>
  41.             <input class="" type="button" value="Add New Book" id="add_book" />
  42.         </div>
  43.     </div>
  44.     <script>
  45.     $(document).ready(function () {
  46.         // var form = document.getElementById(\'form\');
  47.         $("#toggle_form").click(function () {
  48.             if ($("#form").css(\'visibility\') == \'hidden\') {
  49.                 $(\'#form\').css(\'visibility\', \'visible\');
  50.             }
  51.             else if ($("#form").css(\'visibility\') == \'visible\') {
  52.                 $(\'#form\').css(\'visibility\', \'hidden\');
  53.             }
  54.         });
  55.  
  56.         $("#add_book").click(function () {
  57.             var inserted = $("#title").val();
  58.            
  59.             if (inserted == "") {
  60.                 return;
  61.             } else {
  62.                 $("#list").append(new Option(inserted, inserted));
  63.             }
  64.         });
  65.     });
  66.     </script>
  67. </body>
  68. </html>
');