0

Estoy usando Apps Script en Google Sheets para registrar datos ingresados por un formulario a una tabla de la misma hoja del documento, el problema es que al parecer todo está bien en los códigos, pero no recoge la información de las funciones submitForm.

Cuando doy clic en el submit "enviar" solo se cierra y no registra los datos en la tabla del documento, le pregunté a ChatGPT y me dijo que había un error al momento de llamar la función o los parámetros, pero ya verifique que estén escritos de forma correcta.

Aquí estaría el HTML del formulario:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      /* Estilos para el formulario */
      body {
        font-family: Arial, sans-serif;
        background-color: #f1f1f1;
        padding: 20px;
      }

      form {
        width: 580px; /* Ancho del formulario */
        height: 480px; /* Alto del formulario */
        background-color: #fff;
        padding: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      /* Estilos para el contenedor del formulario */
      .formulario-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }
      
      select {
        width: 100%;
        height: 40px;
        padding: 8px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      option {
        width: 100%;
        height: 100px;
        padding-top: 30px;
        padding-bottom: 60px;
        margin-bottom: 50px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      /* Estilos para el campo "Fase" */
      #fase {
        width: 30%; /* Ancho del campo "Fase" */
        height: 40px;
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f5f5f5;
        color: #333;
        font-size: 14px;
      }

      /* Estilos para el campo "Completado" */
      #completado {
        width: 30%; /* Ancho del campo "Completado" */
        height: 40px;
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f5f5f5;
        color: #333;
        font-size: 14px;
      }

      textarea {
        width: 100%;
        height: 40px;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      #prioridad {
        width: 30%; /* Ancho del campo */
        height: 40px;
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f5f5f5;
        color: #333;
        font-size: 14px;
      }

      /* Estilos para el campo de texto */
      #fecha {
        width: 30%;
        height: 40px;
        padding: 8px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;
      }

      input[type="submit"] {
        background-color: #4CAF50;
        font-size: 20px;
        color: #fff;
        border: none;
        margin-top: 20px;
        padding: 10px 30px;
        border-radius: 5px;
        cursor: pointer;
        position: center;
      }
    </style>
  </head>
  <body>
    <form onsubmit="handleFormSubmit(this)">

      <label for="tarea">TAREA:</label>
      <textarea id="tarea" name="tarea" rows="3" cols="40" required></textarea><br>

      <label for="descripcion">DESCRIPCION:</label>
      <textarea id="descripcion" name="descripcion" rows="5" cols="40"></textarea><br>

      <label for="responsables">RESPONSABLES:</label>
      <textarea id="responsables" name="responsables" rows="3" cols="40" required></textarea><br>    

      <div class="formulario-container">
      <label for="prioridad">PRIORIDAD:</label>
      <select id="prioridad" name="prioridad" >
        <option value="URGENTE">URGENTE</option>
        <option value="POCO URGENTE">POCO URGENTE</option>
        <option value="NO URGENTE">NO URGENTE</option>
      </select><br>

      <label for="fecha">FECHA:</label>
      <input type="date" id="fecha" name="fecha" required><br><br>

      </div>

      <div class="formulario-container">
      <label for="fase">FASE:</label>  
      <select id="fase" name="fase" required>
        <option value="PENDIENTE">PENDIENTE</option>
        <option value="EN PROCESO">EN PROCESO</option>
        <option value="EN REVISIÓN">EN REVISIÓN</option>
        <option value="FINALIZADO">FINALIZADO</option>
      </select>

      <label for="completado">% COMPLETADO:</label>
      <select id="completado" name="completado" required>
        <option value="0%">0%</option>
        <option value="10%">10%</option>
        <option value="20%">20%</option>
        <option value="30%">30%</option>
        <option value="40%">40%</option>
        <option value="50%">50%</option>
        <option value="60%">60%</option>
        <option value="70%">70%</option>
        <option value="80%">80%</option>
        <option value="90%">90%</option>
        <option value="100%">100%</option>
      </select>

      </div>
      
      <center><b><input type="submit" value="Enviar"></b></center>
    </form>

    <script>
      function handleFormSubmit(formObject) {
        var fechaInput = formObject.fecha.value;
        var fecha = new Date(fechaInput);

        // Formatear la fecha como desees (por ejemplo, DD/MM/AAAA)
        var formatoFecha = fecha.getDate() + '/' + (fecha.getMonth() + 1) + '/' + fecha.getFullYear();

        var formData = {
          tarea: formObject.tarea.value,
          descripcion: formObject.descripcion.value,
          responsables: formObject.responsables.value,
          prioridad: formObject.prioridad.value,
          fase: formObject.fase.value,
          completado: formObject.completado.value,
          fecha: formatoFecha // Aquí asignamos el valor formateado de la fecha
        };
        google.script.run.submitForm(formData);
        google.script.host.close();
      }
    </script>
  </body>
</html>

Además del código .gs del editor de Apps Script de Google que ejecuta al formulario:

function showForm() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('ingresotarea.html')
    .setWidth(700)
    .setHeight(600);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Nueva tarea');
}

function submitForm(data) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  // Obtener la última fila vacía en la columna
  var lastRow = sheet.getLastRow();
  var startColumn = 5; // Especifica el número de columna donde deseas que comiencen los registros

  // Obtener los datos del formulario, incluyendo la fecha
  var row = [data?.tarea, data?.descripcion, data?.responsables, data?.prioridad, data?.fase, data?.completado, data?.fecha];

  // Establecer los datos en la siguiente fila vacía
  sheet.getRange(lastRow + 1, startColumn, 1, row.length).setValues([row]);
}
2
  • Bienvenida a Stack Overflow en español. Las preguntas que buscan ayuda sobre un mensaje de error deben de incluir el mensaje de error textual ya que este señala el nombre del archivo y el número de línea en el que ha ocurrido el error.
    – Rubén
    Commented el 5 ago. 2023 a las 17:56
  • Te invito a seguir participando. Si tienes dudas o problemas para usar el sitio puedes publicar una pregunta en Stack Overflow Meta en español incluyendo el URL de esta pregunta. Cuando ganes 5 puntos de reputación podrás ampliar tu participación en Stack Overflow Meta en español y cuando ganes 20 puntos podrás participar en el Chat de Stack Overflow en español.
    – Rubén
    Commented el 5 ago. 2023 a las 18:35

1 respuesta 1

2

Entre otros posibles problemas, al formulario del HTML le falta ejecutar event.preventDefault(). Esto es necesario para prevenir que se haga un llamada HTTP POST que en este caso es necesaria ya que en su lugar se está llamando una función del servidor usando google.script.run.

La manera más sencilla me parece que sería que cambiaras

<form onsubmit="handleFormSubmit(this)">

por

<form onsubmit="event.preventDefault(); handleFormSubmit(this)">

Addendum

Sobre el Error

El error TypeError: Cannot read properties of undefined (reading '<<nombre de la propiedad>>') es un error muy común de JavaScript.

Si no lo sabías Google Apps Script (GAS) usa JavaScript como lenguaje de programación y usa V8, un motor de código abierto, para ejecutar JavaScript e interpretar los servicios de GAS como SpreadsheetApp.

En JavaScript undefined es un objeto que se asigna de forma predeterminada a las variables. El mensaje significa que hay una expresión que ha tratado de llamar la propiedad tarea del objeto undefined. El código del lado del cliente que aparentemente has puesto en un archivo .html del editor de GAS, entre las etiquetas script y el código del lado del servidor, archivos .gs del editor de GAS, tienen expresiones que hacen esto.

Sobre ChatGPT

Como estás iniciando en la programación te recomiendo evitar usar ChatGPT gratuito. Hay demasiada contenido que sólo busca sacar provecho del revuelo que causó el lanzamiento de esta herramienta mucho de ese contenido es sensacionalista, confuso y en muchos caso desinforma.

Yo no he usado el ChatGPT de pago. En mi opinión aún es muy pronto para confiar en sus respuestas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.