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]);
}