daniramadhan7

JQuery Toggle Effect

Dec 6th, 2021
657
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JQuery Booklist</title>
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  9.  
  10.     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  11.  
  12.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  13. </head>
  14. <body>
  15.     <div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
  16.         <form>
  17.             <div class="form-group">
  18.               <label for="exampleInputBookName">New Book Name</label>
  19.               <input type="text" class="form-control" id="txtNewBook" aria-describedby="emailHelp" placeholder="Enter book name">
  20.               <small id="bookHelp" class="form-text text-muted">Enter book name</small>
  21.             </div>
  22.             <br />
  23.             <div class="form-group">
  24.               <label for="exampleSelectBook">Select Book</label>
  25.               <select id="DDLbook" class="form-control">
  26.                   <option value="">Select Book</option>
  27.               </select>
  28.               <!-- <input type="text" class="form-control" id="exampleSelectBook" placeholder="Select book"> -->
  29.             </div>
  30.             <br />
  31.             <button type="button" id="btnAdd" class="btn btn-primary">Add Book</button>
  32.             <script>
  33.                 // give id to all controls
  34.                 // now define function for our task.
  35.                 // we have to do something on click of the button. so...
  36.                 // $ is alias of JQuery. you can write jQuery in place of $
  37.                 // # is used to select the control by its id
  38.                 // .click is the function which will invoke when the button is clicked.
  39.                 // function() it's the place where we have to tell jQuery what to do on click of the button
  40.                 $('#btnAdd').click(function() {
  41.                     var newbook = $('#txtNewBook').val(); // var keyword is used to define a variable
  42.                     // val() function is used to take control's value.
  43.                     // in above line we are taking value of textbox into a variable.
  44.        
  45.                     $('#DDLbook').append(new Option(newbook, newbook)); // in this line we are adding something to DDL
  46.                     // append() function is used to add element to the control
  47.                     // new Option is used because in Drop down we have to give value and text for each option
  48.                 })
  49.             </script>
  50.           </form>
  51.  
  52.  
  53.  
  54.         <!-- New Book Name: <input type="text" id="txtNewBook"/>
  55.            <br />
  56.            All Books:
  57.            <select id="DDLbook">
  58.                <option value="">Select</option>
  59.            </select>
  60.            <br />
  61.            <input type="button" id="btnAdd" value="ADD BOOK" />
  62.            <script>
  63.                // give id to all controls
  64.                // now define function for our task.
  65.                // we have to do something on click of the button. so...
  66.                // $ is alias of JQuery. you can write jQuery in place of $
  67.                // # is used to select the control by its id
  68.                // .click is the function which will invoke when the button is clicked.
  69.                // function() it's the place where we have to tell jQuery what to do on click of the button
  70.                $('#btnAdd').click(function() {
  71.                    var newbook = $('#txtNewBook').val(); // var keyword is used to define a variable
  72.                    // val() function is used to take control's value.
  73.                    // in above line we are taking value of textbox into a variable.
  74.        
  75.                    $('#DDLbook').append(new Option(newbook, newbook)); // in this line we are adding something to DDL
  76.                    // append() function is used to add element to the control
  77.                    // new Option is used because in Drop down we have to give value and text for each option
  78.                })
  79.            </script> -->
  80.     </div>
  81. </body>
  82. </html>
RAW Paste Data