Untitled

  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

      <!--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 s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="username" type="text" class="validate">
          <label for="username">Név:</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">apps</i>
          <input id="tel" type="tel" class="validate">
          <label for="tel">Rendfokozat:</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">flag</i>
          <input id="tel1" type="tel" class="validate">
          <label for="tel1">Jelvényszám:</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">date_range</i>
          <input id="tel2" type="tel" class="validate">
          <label for="tel2">Csatlakozás dátuma:</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">drag_handle</i>
          <input id="tel4" type="tel" class="validate">
          <label for="tel4">IRL Név</label>
        </div>
        <div class="input-field col s6">
          <i class="material-icons prefix">check</i>
          <input id="tel3" type="tel" class="validate">
          <label for="tel3">Elfogadta:</label>
        </div>
        <div class="input-field col s6">
              <button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Hozzáadás
              <i class="material-icons right">add</i>
           </button>
        </div>
      </div>

    </div>
      <script>


      var namebox = document.getElementById("username");
      var telbox = document.getElementById("tel");
      var telbox1 = document.getElementById("tel1");
      var telbox2 = document.getElementById("tel2");
      var telbox3 = document.getElementById("tel2");
      var telbox4 = document.getElementById("tel4");


      document.getElementById("btn").addEventListener("click",addRecord);
      function addRecord(){


      var name = namebox.value;
      var rend = telbox.value;
      if(name.trim().length == 0 || rend.trim().length == 0){
          M.toast({html: 'Hiányos adatok!'})
      } else {


      var data = {
      name: namebox.value,
      rend: telbox.value,
      jelvenyszam: telbox1.value,
      csatlakozas: telbox2.value,
      irl: telbox4.value
      } ;

      google.script.run.appendData(data);
      namebox.value = "";
      telbox.value = "";
      telbox1.value = "";
      telbox2.value = "";
      telbox3.value = "";
      telbox4.value = "";
      } //else end
      } //record end


      </script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>