0

Tengo un formulario HTML que envía los datos con method="post" a una hoja de google sheet.
El problema es que los envía, pero los datos ingresan desordenados a la hoja.
He chequeado los name del formulario HTML, la hoja de Google Sheet, y el código en el script de Google Apps Script, y están todos en el orden requerido.
Sin embargo, el problema persiste. Ya no entiendo si el error es proveniente del formulario html o del script en google apps script (aunque creo que es aquí).
Los problemas actuales en total son los siguientes: 1) No me trae Date, y 2) los campos se registran todos desordenados. Ej: Ingresa cuil en la columna de nombre; email en la columna de provincia; etc. Y en otro envío capaz me trae situacion-laboral en la columna nombre y así los errores constantes en los ingresos en todas las columnas. Cabe mencionar que además posee un re-direccionamiento mediante return HtmlService aunque creo no debería ser ese el problema...

Copio el script completo de Google Apps Script (con datos de prueba)

function doPost(e) {
    try {
        var ss = SpreadsheetApp.openByUrl("XXX");
        var sheet = ss.getSheetByName("Hoja 1");
        
        // Mapeo de campos con columnas en la hoja de Google Sheet
        var fieldToColumn = {
          'dinero-necesitas': 'A',
          'nombre': 'B',
          'apellido': 'C',
          'cuil': 'D',
          'situacion-laboral': 'E',
          'provincia': 'F',
          'banco-cobro': 'G',
          'telefono': 'H',
          'email': 'I',
        };
        
        // Ordena los datos en el mismo orden que las columnas de la hoja de cálculo
        rowData.sort(function(a, b) {
          return fieldToColumn[a] - fieldToColumn[b];
        });
        
        // Agrega la fecha actual al registro
        rowData.push(new Date());
        
        // Crea la columna "Fecha"
        sheet.getRange("A1").setValue("Fecha");
        
        // Encuentra la última fila no vacía en la columna A
        var lastRow = sheet.getLastRow();
        
        // Inserta la fila en la hoja, respetando el orden de las columnas
        sheet.appendRow(["dinero-necesitas","nombre","apellido","cuil","situacion-laboral","provincia","banco-cobro","telefono","email"])
        
        // Redirecciona al usuario a la página deseada
        return HtmlService.createHtmlOutput('<script>window.location.href = "https://www.ejemplo.com";</script>');
    } catch (error) {
        return ContentService.createTextOutput("Error al registrar: " + error.message); // En caso de error, responde con un mensaje de error
    }
}

Y aquí el código del formulario HTML (con datos de prueba)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solicitud de Crédito</title>
<style>
    .form-container {
        max-width: 500px;
        margin: 0 auto;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #0077c0;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 8px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .form-group input[type="submit"] {
        background-color: #0077c0;
        color: white;
        cursor: pointer;
    }

    .form-group .file-upload {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .form-group .file-upload input[type="file"] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .form-group .file-upload .button {
        padding: 8px 16px;
        background-color: #0077c0;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }

    footer {
        background-color: #fff;
        font-size: 12px;
        padding: 10px;
        margin-top: 20px;
        text-align: justify;
    }
</style>

<script src="validation.js">
function validateForm() {
    // Get the value of the hidden field.
    var columnName = document.getElementById("columnName").value;

    // Get the value of the first field in the form.
    var firstFieldValue = document.getElementById("firstField").value;

    // Check if the values match.
    if (columnName != firstFieldValue) {
      // The values do not match.
       alert("Los valores no coinciden. Por favor, inténtelo de nuevo.");
       return false;
    }

    // The values match.
    return true;
}
<div class="form-container">
    <h2 style="color: #0077c0;">Solicitud de Crédito</h2>
    <form action="https://script.google.com/macros/s/XXX/exec" method="post" enctype="multipart/form-data" id="credit-form">
        <div class="form-group">
            <label for="dinero-necesitas" style="color: #80c342;">¿Cuánto dinero necesitas?</label>
            <input type="range" id="dinero-necesitas" name="dinero-necesitas" min="10000" max="250000" step="1000" required="">
            <input type="hidden" name="dinero-necesitas" value="dinero-necesitas">
            <output for="dinero-necesitas" id="output-dinero-necesitas" style="color: #0077c0;">$100.000</output>
            <script>
                var slider = document.getElementById("dinero-necesitas");
                var output = document.getElementById("output-dinero-necesitas");

                slider.oninput = function() {
                    var value = Number(this.value).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
                    output.innerHTML = value;
                }
            </script>
        </div>
        <div class="form-group">
            <input type="text" id="nombre" name="nombre" placeholder="Tu Nombre" required="">
            <input type="hidden" name="nombre" value="nombre">
        </div>
        <div class="form-group">
            <input type="text" id="apellido" name="apellido" placeholder="Tu Apellido" required="">
            <input type="hidden" name="apellido" value="apellido">
        </div>
        <div class="form-group">
            <input type="text" id="cuil" name="cuil" placeholder="CUIL" pattern="[0-9]{11}" required="">
            <small style="color: #0077c0;">El CUIL debe tener 11 dígitos.</small>
            <input type="hidden" name="cuil" value="cuil">
        </div>
        <div class="form-group">
            <select id="situacion-laboral" name="situacion-laboral" required="">
                <option value="">Selecciona tu situación laboral</option>
                <option value="Administración Pública Nacional">Administración Pública Nacional</option>
                <option value="Fuerzas de Seguridad Nacional">Fuerzas de Seguridad Nacional</option>
                <option value="Fuerzas Armadas Nacionales">Fuerzas Armadas Nacionales</option>
                <option value="Empleado/a PÚBLICO/A Provincial">Empleado/a PÚBLICO/A Provincial</option>
                <option value="Empleado/a PÚBLICO/A Municipal">Empleado/a PÚBLICO/A Municipal</option>
                <option value="Empleado/a PRIVADO/A">Empleado/a PRIVADO/A</option>
                <option value="Jubilado/a-Pensionado/a ANSES">Jubilado/a-Pensionado/a ANSES</option>
                <option value="Jubilado/a-Pensionado/a PROVINCIAL">Jubilado/a-Pensionado/a PROVINCIAL</option>
                <option value="Beneficio 40 Pensión Graciable">Beneficio 40 Pensión Graciable</option>
                <option value="Otros Beneficios ANSES">Otros Beneficios ANSES</option>
                <option value="Autónomo/Monotributo">Autónomo/Monotributo</option>
            </select>
            <input type="hidden" name="situacion-laboral" value="situacion-laboral">
        </div>
        <div class="form-group">
            <select id="provincia" name="provincia" required="">
                <option value="">Selecciona una provincia</option>
                <option value="Buenos Aires">Buenos Aires</option>
                <option value="CABA">Ciudad Autónoma de Buenos Aires</option>
                <option value="Catamarca">Catamarca</option>
                <option value="Chaco">Chaco</option>
                <option value="Chubut">Chubut</option>
                <option value="Córdoba">Córdoba</option>
                <option value="Corrientes">Corrientes</option>
                <option value="Entre Ríos">Entre Ríos</option>
                <option value="Formosa">Formosa</option>
                <option value="Jujuy">Jujuy</option>
                <option value="La Pampa">La Pampa</option>
                <option value="La Rioja">La Rioja</option>
                <option value="Mendoza">Mendoza</option>
                <option value="Misiones">Misiones</option>
                <option value="Neuquén">Neuquén</option>
                <option value="Río Negro">Río Negro</option>
                <option value="Salta">Salta</option>
                <option value="San Juan">San Juan</option>
                <option value="San Luis">San Luis</option>
                <option value="Santa Cruz">Santa Cruz</option>
                <option value="Santa Fe">Santa Fe</option>
                <option value="Santiago del Estero">Santiago del Estero</option>
                <option value="Tierra del Fuego">Tierra del Fuego</option>
                <option value="Tucumán">Tucumán</option>
            </select>
            <input type="hidden" name="provincia" value="provincia">
        </div>
        <div class="form-group">
            <select id="banco-cobro" name="banco-cobro" required="">
                <option value="">Selecciona tu banco de cobro</option>
                <option value="BANCO DE GALICIA Y BUENOS AIRES S.A.U.">BANCO DE GALICIA Y BUENOS AIRES S.A.U.</option>
                <option value="BANCO DE LA NACION ARGENTINA">BANCO DE LA NACION ARGENTINA</option>
                <option value="BANCO DE LA PROVINCIA DE BUENOS AIRES">BANCO DE LA PROVINCIA DE BUENOS AIRES</option>
                <option value="BANCO ICBC">BANCO ICBC</option>
                <option value="CITIBANK N.A.">CITIBANK N.A.</option>
                <option value="BANCO BBVA ARGENTINA S.A.">BANCO BBVA ARGENTINA S.A.</option>
                <option value="BANCO DE LA PROVINCIA DE CORDOBA S.A.">BANCO DE LA PROVINCIA DE CORDOBA S.A.</option>
                <option value="BANCO SUPERVIELLE S.A.">BANCO SUPERVIELLE S.A.</option>
                <option value="BANCO DE LA CIUDAD DE BUENOS AIRES">BANCO DE LA CIUDAD DE BUENOS AIRES</option>
                <option value="BANCO PATAGONIA S.A.">BANCO PATAGONIA S.A.</option>
                <option value="BANCO HIPOTECARIO S.A.">BANCO HIPOTECARIO S.A.</option>
                <option value="BANCO DE SAN JUAN S.A.">BANCO DE SAN JUAN S.A.</option>
                <option value="BANCO MUNICIPAL DE ROSARIO">BANCO MUNICIPAL DE ROSARIO</option>
                <option value="BANCO SANTANDER ARGENTINA S.A.">BANCO SANTANDER ARGENTINA S.A.</option>
                <option value="BANCO DEL CHUBUT S.A.">BANCO DEL CHUBUT S.A.</option>
                <option value="BANCO DE SANTA CRUZ S.A.">BANCO DE SANTA CRUZ S.A.</option>
                <option value="BANCO DE LA PAMPA">BANCO DE LA PAMPA</option>
                <option value="BANCO DE CORRIENTES S.A.">BANCO DE CORRIENTES S.A.</option>
                <option value="BANCO PROVINCIA DEL NEUQUÉN S.A.">BANCO PROVINCIA DEL NEUQUÉN S.A.</option>
                <option value="BRUBANK S.A.U.">BRUBANK S.A.U.</option>
                <option value="BIBANK S.A.">BIBANK S.A.</option>
                <option value="HSBC BANK ARGENTINA S.A.">HSBC BANK ARGENTINA S.A.</option>
                <option value="OPEN BANK ARGENTINA S.A.">OPEN BANK ARGENTINA S.A.</option>
                <option value="BANCO CREDICOOP COOP. LTADO.">BANCO CREDICOOP COOP. LTADO.</option>
                <option value="BANCO ITAU ARGENTINA S.A.">BANCO ITAU ARGENTINA S.A.</option>
                <option value="BANCO PROVINCIA DE TIERRA DEL FUEGO">BANCO PROVINCIA DE TIERRA DEL FUEGO</option>
                <option value="BANCO MACRO S.A.">BANCO MACRO S.A.</option>
                <option value="BANCO COMAFI S.A.">BANCO COMAFI S.A.</option>
                <option value="BANCO RIOJA S.A.U.">BANCO RIOJA S.A.U.</option>
                <option value="BANCO DEL SOL S.A.">BANCO DEL SOL S.A.</option>
                <option value="NUEVO BANCO DEL CHACO S. A.">NUEVO BANCO DEL CHACO S. A.</option>
                <option value="BANCO DE FORMOSA S.A.">BANCO DE FORMOSA S.A.</option>
                <option value="BANCO DE SANTIAGO DEL ESTERO S.A.">BANCO DE SANTIAGO DEL ESTERO S.A.</option>
                <option value="BANCO INDUSTRIAL S.A.">BANCO INDUSTRIAL S.A.</option>
                <option value="NUEVO BANCO DE SANTA FE S.A.">NUEVO BANCO DE SANTA FE S.A.</option>
                <option value="WILOBANK S.A.U.">WILOBANK S.A.U.</option>
                <option value="NUEVO BANCO DE ENTRE RÍOS S.A.">NUEVO BANCO DE ENTRE RÍOS S.A.</option>
                <option value="BANCO COLUMBIA S.A.">BANCO COLUMBIA S.A.</option>
                <option value="BANCO BICA S.A.">BANCO BICA S.A.</option>
                <option value="BANCO COINAG S.A.">BANCO COINAG S.A.</option>
                <option value="Otro Banco No Listado">Otro Banco No Listado</option>
            </select>
            <input type="hidden" name="banco-cobro" value="banco-cobro">
        </div>
        <div class="form-group">
            <input type="tel" id="telefono" name="telefono" placeholder="Número WhatsApp" pattern="[0-9]{10}" required="">
            <small style="color: #0077c0;">El número debe tener 10 dígitos (ejemplo: 3519999999).</small>
            <input type="hidden" name="telefono" value="telefono">
        </div>
        <div class="form-group">
            <input type="email" id="email" name="email" placeholder="Correo electrónico" required="">
            <input type="hidden" name="email" value="email">
        </div>
            <div class="form-group">
    <input type="submit" value="Generar Solicitud">
            </div>
        </form>
    </div>
<footer>
    <p>
        INFORMACIÓN FINANCIERA: XXX
    </p>
</footer>

<script>
var form = document.getElementById('credit-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();

    // Obtener los datos del formulario
    var formData = new FormData(form);

    // Enviar los datos al script de Google Apps Script
    fetch(form.action, {
        method: 'POST',
        body: formData
    })
    .then(function(response) {
        if (response.ok) {
            return response.text();
        } else {
            throw new Error('Error al enviar el formulario');
        }
    })
    .then(function(data) {
        // Mostrar mensaje de confirmación
        alert(data);
        form.reset(); // Limpiar el formulario después del envío

        // Redireccionar al usuario a la página deseada
        window.location.href = 'https://www.ejemplo.com';
    })
    .catch(function(error) {
        console.error(error);
        alert('Hubo un error al enviar el formulario.');
    });
});

var slider = document.getElementById("dinero-necesitas");
var output = document.getElementById("output-dinero-necesitas");

slider.oninput = function() {
    var value = Number(this.value).toLocaleString('es-AR', { style: 'currency', currency: 'ARS' });
    output.innerHTML = value;
};
</script>

Nota: Al ingresar el código lo copió separado. No trajo la apertura del script en el formulario HTML, pero está.

2
  • Era más claro con la imagen! No dividas el código, copia lo mismo que tenias en la imagen y ponlo como texto. Abre el monitor de red del navegador y realiza la solicitud POST. Luego buscas el registro en el monitor de red y mira la pestaña "carga útil" para determinar si los datos son enviados correctamente o no (así sabemos quien es el culpable)
    – Yussef
    Commented el 7 ago. 2023 a las 19:22
  • Listo! Código del Script en las modificaciones (con datos de prueba). Agradezco la comprensión. Soy nuevo en el foro. Mientras tanto estoy viendo el monitor de red.
    – Walter
    Commented el 7 ago. 2023 a las 20:45

1 respuesta 1

0

Uno de los problemas es que rowData no está definido en el código de Google Apps Script mostrado.

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.