Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--DROPDOWN SCRIPT-->
- <script>
- document.addEventListener('DOMContentLoaded', function() {
- var elems = document.querySelectorAll('select');
- var instances = M.FormSelect.init(elems);
- });
- </script>
- <!--END DROPDOWN SCRIPT-->
- <!--GET ACTIVE USER-->
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
- <link rel="stylesheet" href="/resources/demos/style.css">
- <p>
- Effective User: <span id="effectiveUser"></span>
- </p>
- <p>
- Active User: <span id="activeUser"></span>
- </p>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
- <script>
- $(function() { //This function runs automatically when the sidebar is opended
- google.script.run.withSuccessHandler(loadListItems).withFailureHandler(fail).getListItems();
- });
- function loadListItems(returnedData){
- $( "#effectiveUser" ).html(returnedData[0]);
- $( "#activeUser" ).html(returnedData[1]);
- }
- function fail(){
- //update the field with the id of yourChoice
- $( "#effectiveUser").html("<strong> Opps, something went wrong.... </strong>");
- }
- </script>
- <!--END GET ACTIVE USER-->
- <html>
- <head>
- <!--Import Google Icon Font-->
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <!-- Compiled and minified CSS -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
- <!--Let browser know website is optimized for mobile-->
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="input-field col s12">
- <i class="material-icons prefix">account_circle</i>
- <input id="username" type="text" class="validate">
- <label for="usermame">Khoros Link</label>
- </div>
- <div class="input-field col s12">
- <i class="material-icons prefix">phone</i>
- <input id="tel" type="text" class="validate">
- <label for="tel">Telephone</label>
- </div>
- <div class="input-field col s20">
- <button class="btn waves-effect waves-light" id="btn">Add
- <i class="material-icons right">send</i>
- </button>
- </div>
- </div> <!--END ROW-->
- <!--DROPDOWN UI-->
- <div class="row">
- <div class="input-field col s12">
- <select id="dropdrop">
- <option value="0"disabled selected>Choose your option</option>
- <option value="1">Option 1</option>
- <option value="2">Option 2</option>
- <option value="3">Option 3</option>
- </select>
- <label>Materialize Select</label>
- </div>
- </div>
- </div>
- <!--END DROPDOWN UI-->
- <!-- Compiled and minified JavaScript -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
- <script>
- var nameBox = document.getElementById("username");
- var phoneBox = document.getElementById("tel");
- var dropBox = document.getElementById("dropdrop");
- var userBox = document.getElementById("effectiveUser");
- document.getElementById("btn").addEventListener('click',addRecord);
- function addRecord(){
- var name1 = nameBox.value;
- var phone2 = phoneBox.value;
- var drop1 = dropBox.value;
- var user1 = userBox.value;
- google.script.run.appendData(name1,phone2,drop1,user1);
- nameBox.value = "";
- phoneBox.value = "";
- dropBox.value = "";
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement