1

Quiero enviar los datos del formulario a una hoja de Google, a través de un script, la cual me redirige a un json en el que indica que se ha realizado correctamente y me indica en que fila se ha guardado. Lo que yo quiero es que no vaya a esa página si no que vaya a una página de agradecimiento.

Edit: El error está en que no redirige a la página que quiero, sigue redirigiéndome a la página del script de google, como si ignorase el script.

Edit 2: El script de google es la siguiente aplicación web. Web App

Form:

<form method="post" id="formID" action="gscript">
...
</form>

Script:

<script>
   $(document).on('submit', '.formID', function(e) {
     $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(html) {
        alert('ok');
        window.location("pagina de agradecimiento");
        }
    });
    e.preventDefault();

});
</script>
7
  • te muestra el 'ok' del alert? Commented el 27 abr. 2017 a las 14:09
  • No @JoséMiguelSepulveda
    – David
    Commented el 27 abr. 2017 a las 14:14
  • @David: La pregunta está incompleta porque no has indicado cómo estás enviando los datos a la hoja de Google ¿estás usando un web app, la execution api u otra cosa? Por otro lado para simplificar la pregunta podrías intentar primero hacer lo mismo sin usar Google Apps Script, por ejemplo, pasando los datos del formulario a la consola.
    – Rubén
    Commented el 27 abr. 2017 a las 15:24
  • Ahora lo edito, de todas formas, los datos los pasa correctamente.
    – David
    Commented el 27 abr. 2017 a las 15:32
  • Las preguntas sobre código que no funciona, deben incluir un ejemplo mínimo verificable.
    – Rubén
    Commented el 27 abr. 2017 a las 16:01

3 respuestas 3

3

Veo un error en el selector del formulario: debería ser '#formID' en lugar de '.formID'.

Prueba utilizando la sintaxis de promesas y mandando la información completa del posible error a la consola:

   $(document).on('submit', '#formID', function(e) {
     $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize()
     }).done(function (html) {
         alert('ok');
         window.location.href = 'http://www.milejemplos.com/frases/frases-de-agradecimiento';
     }).fail(function(jqXhr, msg) {
          var responseText = jqXhr.responseText || '';
          console.log(msg + ':\n' + responseText);
     });
    e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="formID" action="">
	<input type="text" name="campo" />
	<input type="submit">
</form>

6
  • Acabo de añadir algo más, no sé como explicarlo mejor.
    – David
    Commented el 27 abr. 2017 a las 14:22
  • 1
    En realidad sí te va a ignorar el script por el error en el selector que te comento. Commented el 27 abr. 2017 a las 14:23
  • @AsierVillanueva tiene razon. No te tomará la función por que estara buscando una clase y no un id Commented el 27 abr. 2017 a las 14:44
  • Incluso con ese cambio sigue pasando exactamente lo mismo.
    – David
    Commented el 27 abr. 2017 a las 14:47
  • Te he puesto un ejemplo en el que debería mandar la información del error a la consola para ver qué es lo que está fallando. Commented el 27 abr. 2017 a las 15:08
0

Recién se agregó el enlace al código usado para la aplicación web creada usando Google Apps Script. Ese código tiene varios problemas

  1. Usa un método deprecado (obsoleto), específicamente UiApp.
  2. No incluye devolver una respuesta ni en caso de éxito (success) ni en caso de falla (failure).

En lugar de ese ejemplo, mejor usar este otro https://gist.github.com/mhawksey/1276293. Nótese que este incluye el uso de ContentService para crear las respuestas tanto para el caso de éxito como de falla.

  try{
    // ...

    // return json success results
    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }

A continuación un ejemplo

$( "#formulario" ).submit(function( event ) {
  event.preventDefault();
  $.ajax({
    type: "POST",
    url: "https://script.google.com/macros/s/AKfycbzhZaMeboekcH7VxNBh2lS-wYyKb07je2hqsKIl_HKFTiASNJUb/exec",
    data: '',
    success: function(){
      alert( "Gracias" );
      $(document.body).html("Se dieron las gracias");
    }
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form id="formulario">
  <input type="submit">
</form>

Código de la aplicación web llamada por el código previo

function doPost(e) {
  try {
    // Hacer algo
    var nextRow = 1;
    // devolver JSON éxito (success)
    return ContentService
     .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
     .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    // en caso de error devolver esto
    return ContentService
     .createTextOutput(JSON.stringify({"result":"error", "error": e}))
     .setMimeType(ContentService.MimeType.JSON);
  } finally {
    // En cualquier caso, terminar realizando lo siguiente
  }
}


La pregunta se puede simplificar a

¿Cómo hacer que el formulario de la respuesta que yo quiero al usuario?

Para fines de simplicidad, digamos que "lo que yo quiero" es mostrar una alerta y escribir un mensaje en la página.

La forma básica de especificar lo que se debe hacer al enviar un formulario, es a través del atributo onsubmit. En este puedes colocar el código JavaScript

<form id="formulario" onsubmit="window.alert('Gracias'); document.write('Se dieron las gracias')">
  <input type="submit"/>
</form>

Si decides que todo se controle a través de un script, entonces pon onsubmit="miScript"

function miScript() {
  window.alert('Gracias'); document.write('Se dieron las gracias');
}
<form id="formulario" action="" onsubmit="miScript()" >
  <input type="submit"/>
</form>

A continuación lo mismo, pero usando jQuery, en el cual se debe incluir preventDefault para lograr lo que se está buscando.

$( "#formulario" ).submit(function( event ) {
  event.preventDefault();
  alert( "Gracias" );
  $(document.body).html("Se dieron las gracias");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<form id="formulario">
  <input type="submit">
</form>

4
  • Me funciona bien ya, pero dónde debo colocar el script de google para que este funcione? Probé en el action del formulario pero no hace nada.
    – David
    Commented el 28 abr. 2017 a las 9:37
  • Acabo de añadir un link a la web app que uso
    – David
    Commented el 28 abr. 2017 a las 10:12
  • Ok, he cambiado el código de la aplicación web, pero sigue igual
    – David
    Commented el 28 abr. 2017 a las 11:20
  • 1
    Ya funciona, gracias por todo.es.stackoverflow.com/users/65/rub%c3%a9n
    – David
    Commented el 28 abr. 2017 a las 15:35
0

Hay varias cosas que ver, el window.location, es con window.location.href y no es un método, es una propiedad, y aparte cuando el selector es para un ID se utiliza # y no . Saludos.

   $(function(){
      $('#formID').submit(function(event){
          event.preventDefault();
           $.ajax({
              url: $('#formID').attr('action'),
              type: $('#formID').attr('method'),
              data: $('#formID').serialize(),
              success: function(data) {
                alert('ok');
                window.location.href = 'pagina de agradecimiento';
              },
              error: function(ort, rt, qrt){
                console.log('hay un error');
                console.log(ort);
              }
          });
      });
   });
});
<form method="post" id="formID" action="gscript">
...
</form>

9
  • Sigue igual, lo único que ahora abre la respuesta del gscript en una ventana nueva
    – David
    Commented el 27 abr. 2017 a las 14:47
  • ¿Que error te bota, o no te sale nada? Commented el 27 abr. 2017 a las 14:48
  • No me sale nada. Estoy mirando en la consola de google chrome, no estoy muy familiarizado con la programación web y no sé si se mira en otro lado.
    – David
    Commented el 27 abr. 2017 a las 14:51
  • ¿Y no te aparece ningún error? Mira también en la pestaña "Network", aunque si hay algún error ahí también debería aparecer en la consola. Commented el 27 abr. 2017 a las 14:58
  • No, tampoco, es como si fuese directo al action con el script y no pasase por el script, es la sensación que me da a mi.
    – David
    Commented el 27 abr. 2017 a las 15:03

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.