CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
Reydne Bruno
Reydne Bruno

Reputation: 51

Form html google scrip

Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.

function doGet() {
  return HtmlService
      .createHtmlOutputFromFile('index')
}
function criarDocument(){
   
  var doc = DocumentApp.create('Doc');
}
function criarSheet(){
     
  var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
  var presentation =
      Slides.Presentations.create({"title": "Presentation"});
  Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <style>
        body{
          background-color: lightblue;
        }
      </style>
      <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
      <title>CRIE</title>
      <script>
          function criarDocument(){
              google.script.run.criarDocument();
              }
          function criarSheet(){
              google.script.run.criarSheet();
          }
          function createPresentation(){
              google.script.run.createPresentation();
          }
      
          function titulo(){
              var st = document.getElementById('student').value;
              var te = document.getElementById('teacher').value;
              var wo = document.getelementById('work').value;
           
              document.getElementById('student' + 'teacher' + 'work').value;
         }
      </script>
  </head>
  <body>
    <h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
    <div>
      <form id = 'form' onsubmit="titulo">
        <h2><p align = "center"> Student:</p></h2><p align = "center">
        <input type="text" name="estudante" id="student">
        <h2><p align = "center">Teacher: </p></h2><p align = "center">
        <input type="text" name="professor" id="teacher">
        <h2><p align = "center">Work Name</p></h2><p align = "center">
        <input type="text" name="trabalho" id="work">
        <br><br>
        <button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
        <button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
        <button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
      </form>
    </div>
  </body>
</html>

Upvotes: 2

Views: 81

Answers (1)

Cooper
Cooper

Reputation: 64062

Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.

Code.gs

function onOpen()
{
  loadSideBar();
  SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();  
}

function dispText(txt)
{
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var sht=ss.getSheetByName('Notes');
  var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
  var row=[];
  row.push(ts);
  row.push(txt);
  sht.appendRow(row);
  return true;
}

function loadSideBar()
{
  var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
  SpreadsheetApp.getUi().showSidebar(userInterface);
}

sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
        $('#txt1').val('');
      });
    function sendText()
    {
      var txt=$('#txt1').val();
      google.script.run
        .withSuccessHandler(clearText)
        .dispText(txt);
    }
    function clearText()
    {
      $('#txt1').val('');
    }
    console.log("My code");
  </script>
  </head>
  <body>
  <textarea id="txt1" rows="12" cols="35"></textarea><br />
  <input id="btn1" type="button" value="submit" onClick="sendText();" />

  </body>
</html>

Upvotes: 1

Related Questions