SHARE
TWEET

Userform

VonDutch17 Jan 20th, 2020 119 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3.  
  4.  
  5. <!--DROPDOWN SCRIPT-->
  6. <script>
  7. document.addEventListener('DOMContentLoaded', function() {
  8.     var elems = document.querySelectorAll('select');
  9.     var instances = M.FormSelect.init(elems);
  10.   });
  11. </script>
  12. <!--END DROPDOWN SCRIPT-->
  13.  
  14.  
  15.  
  16.  
  17.  
  18. <!--GET ACTIVE USER-->
  19.  
  20. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  21. <link rel="stylesheet" href="/resources/demos/style.css">
  22.  
  23. <p>
  24. Effective User: <span id="effectiveUser"></span>
  25. </p>
  26. <p>
  27. Active User: <span id="activeUser"></span>
  28. </p>
  29.            
  30.  
  31.  
  32. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  33. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  34.  
  35. <script>
  36.   $(function() {    //This function runs automatically when the sidebar is opended  
  37.         google.script.run.withSuccessHandler(loadListItems).withFailureHandler(fail).getListItems();
  38.   });
  39.  
  40.  
  41.     function loadListItems(returnedData){
  42.     $( "#effectiveUser" ).html(returnedData[0]);
  43.     $( "#activeUser" ).html(returnedData[1]);  
  44.   }
  45.      function fail(){
  46.         //update the field with the id of yourChoice
  47.     $( "#effectiveUser").html("<strong> Opps, something went wrong.... </strong>");
  48.   }
  49. </script>
  50.  
  51. <!--END GET ACTIVE USER-->
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.   <html>
  59.  
  60.     <head>
  61.       <!--Import Google Icon Font-->
  62.       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  63.      
  64.       <!-- Compiled and minified CSS -->
  65.       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  66.  
  67.       <!--Let browser know website is optimized for mobile-->
  68.       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  69.     </head>
  70.  
  71.     <body>
  72.    
  73.     <div class="container">
  74.    
  75.       <div class="row">
  76.        
  77.        
  78.         <div class="input-field col s12">
  79.           <i class="material-icons prefix">account_circle</i>
  80.           <input id="username" type="text" class="validate">
  81.           <label for="usermame">Khoros Link</label>
  82.         </div>
  83.        
  84.        
  85.         <div class="input-field col s12">
  86.           <i class="material-icons prefix">phone</i>
  87.           <input id="tel" type="text" class="validate">
  88.           <label for="tel">Telephone</label>
  89.         </div>
  90.        
  91.         <div class="input-field col s20">
  92.           <button class="btn waves-effect waves-light" id="btn">Add
  93.           <i class="material-icons right">send</i>
  94.           </button>
  95.         </div>
  96.  
  97.       </div> <!--END ROW-->
  98.      
  99.      
  100.      <!--DROPDOWN UI-->
  101.      <div class="row">
  102.       <div class="input-field col s12">
  103.         <select id="dropdrop">
  104.           <option value="0"disabled selected>Choose your option</option>
  105.           <option value="1">Option 1</option>
  106.           <option value="2">Option 2</option>
  107.           <option value="3">Option 3</option>
  108.         </select>
  109.        <label>Materialize Select</label>
  110.       </div>
  111.      </div>
  112.     </div>
  113.     <!--END DROPDOWN UI-->
  114.    
  115.    
  116.  
  117.  
  118.     <!-- Compiled and minified JavaScript -->
  119.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  120.             <script>
  121.               var nameBox = document.getElementById("username");
  122.               var phoneBox = document.getElementById("tel");
  123.               var dropBox = document.getElementById("dropdrop");
  124.               var userBox = document.getElementById("effectiveUser");
  125.      
  126.            
  127.               document.getElementById("btn").addEventListener('click',addRecord);
  128.              
  129.               function addRecord(){
  130.              
  131.               var name1 = nameBox.value;
  132.               var phone2 = phoneBox.value;
  133.               var drop1 = dropBox.value;
  134.               var user1 = userBox.value;
  135.               google.script.run.appendData(name1,phone2,drop1,user1);
  136.               nameBox.value = "";
  137.               phoneBox.value = "";
  138.               dropBox.value = "";
  139.               }
  140.        
  141.                
  142.             </script>
  143.     </body>
  144.      
  145.   </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top