0

Disculpen mi ignorancia, como no se mucho de programación se me ocurrio usar un formulario de google para usarlo como de contacto en un proyecto propio, básicamente porque sin desarrollar nada me permite capturar respuestas, notificar por correo y almacenar las respuestas en un excel, además de poder dar el estilo CSS del formulario a mi propio criterio, pero el problema que quiero resolver es que siempre que envía una respuesta recarga toda la página.

Yo puedo cambiar el target del formulario por un _blankpara que lo haga en una pestaña nueva, pero me estaba preguntando si se podría evitar esto y más bien realizar el envío en segundo plano, lanzando un modal o enviarlo vía ajax y que no se recargue todo.

Este es el formulario de prueba:

<form action="https://docs.google.com/forms/d/e/1FAIpQLScm4zxoRbV-evZpGVzF3vAdfdQVDSWzbipvCAX_TIBTIwQS3g/formResponse" method="POST" target="_self" autocomplete="on" _lpchecked="1">
  
  <label for="entry_1022626025">Nombre y Apellido</label>
  <input type="text" name="entry.1022626025" value="" id="entry_1022626025" required="">
  <br>
  <label for="entry_121012742">Email</label>
  <input type="email" name="entry.121012742" id="entry_121012742" required="">
  <br>  
  <label for="entry_1619168523">Celular</label>
  <input type="number" name="entry.1619168523" id="entry_1619168523" required="">
  <br>
  <label class="ss-q-item-label" for="entry_1598229916">Empresa</label>
  <input type="text" name="entry.1598229916" id="entry_1598229916" required="">
  <br>
  <label for="entry_518966266">Ciudad y/o Municipio</label>
  <input type="text" name="entry.518966266" id="entry_518966266" required="">
  <br>
  <label for="entry_1469275999">Comentarios</label>
  <textarea name="entry.1469275999" rows="8" cols="0" id="entry_1469275999" required=""></textarea>
  <br>
  <input type="submit" name="submit" value="Enviar" id="ss-submit">
  
</form>

Perdonen que no coloque más código, pero no conozco mucho de AJAX ni de como funciona, lo máximo que he podido hacer con JQUERY son eventos.

Para comprobar si el envío del formulario funciona, acá les dejo El link de las respuesta en Google Sheets cada vez que lo usen, una respuesta automáticamente se recopilará en este formulario.

2
  • Jquery tiene unos métodos de Ajax, el cual te hace muy fácil lo que desea hacer. Te comparto el enlace donde puede comenzar a leer sobre ello: api.jquery.com/jquery.ajax ¡Saludos!.
    – Ricardo
    Commented el 11 sept. 2018 a las 1:09
  • @Ricardo No tendrás un tutorial en español sobre Ajax con Jquery o algo más básico? Es que uso la documentación oficial de jquery para eventos y funciones, pero como no entiendo mucho de programación, aún no entiendo bien la lógica de este o como funciona. Commented el 11 sept. 2018 a las 14:52

2 respuestas 2

1

leyendo lo que necesitas, quizas necesites un ejemplo base, de acuerdo a tu estructura. Aqui te dejo un ejemplo que debe funcionar:

<form action="https://docs.google.com/forms/d/e/1FAIpQLScm4zxoRbV-evZpGVzF3vAdfdQVDSWzbipvCAX_TIBTIwQS3g/formResponse" method="POST" target="_self" autocomplete="on" _lpchecked="1">

  <label for="entry_1022626025">Nombre y Apellido</label>
  <input type="text" name="entry.1022626025" value="" id="entry_1022626025" required="">
  <br>
  <label for="entry_121012742">Email</label>
  <input type="email" name="entry.121012742" id="entry_121012742" required="">
  <br>  
  <label for="entry_1619168523">Celular</label>
  <input type="number" name="entry.1619168523" id="entry_1619168523" required="">
  <br>
  <label class="ss-q-item-label" for="entry_1598229916">Empresa</label>
  <input type="text" name="entry.1598229916" id="entry_1598229916" required="">
  <br>
  <label for="entry_518966266">Ciudad y/o Municipio</label>
  <input type="text" name="entry.518966266" id="entry_518966266" required="">
  <br>
  <label for="entry_1469275999">Comentarios</label>
  <textarea name="entry.1469275999" rows="8" cols="0" id="entry_1469275999" required=""></textarea>
  <br>
  <input type="submit" name="submit" value="Enviar" id="ss-submit">

</form>

aqui el script de captura y envio

<script type="text/javascript">
 $("#ss-submit").click(function(){
        //capturas los valores de los campos con jquery
        var campo_1= $('#entry_1022626025').val();
        var campo_2= $('#entry_121012742').val();
        var campo_3= $('#entry_1619168523').val();
        var campo_4= $('#entry_1598229916').val();
        var campo_5= $('#entry_518966266').val();
        var campo_6= $('#entry_1469275999').val();

        //una variable que llevara los datos 
        datos = "entry_1022626025="+fecha_cita+"&entry_121012742="+atendio+"&entry_1619168523="+nombre+"&entry_1598229916="+apellido+"&entry_518966266="+LISTA+"&entry_1469275999="+nroradicado;

      $.ajax({
        type: "POST",
        url: "mi_url_de_destino.php",
        data: datos, //pasas los valores de la variable datos
        dataType:"html",
        success: function(data) 
        {
           //si la peticion sale bien, aqui tendras los resultados que quieres
            alert(data);
        },
        error: function( jqXHR, textStatus, errorThrown ){
            //si la peticion falla aqui puedes saber alguna pista respecto al error 
            console.log(textStatus);
            alert('ALGO SALIO MAL, INTENTA DE NUEVO');
        },


      });
});

</script>

// en el php los capturas de acuerdo al parametro que le diste dentro de la varaible datos

if ( !empty($_POST['entry_1022626025'])  &&
     !empty($_POST['entry_121012742'])  &&
     !empty($_POST['entry_1619168523'])  &&
     !empty($_POST['entry_1598229916'])  &&
     !empty($_POST['entry_518966266'])  &&
     !empty($_POST['entry_1469275999']) ) {

  //aqui puedes hacer algo con la info. y luego le das un echo para que devuelva la informacion con formato Json
  //por ejemplo
  $arrayjson[] = array(
                'informacion_1' => $valor_1,
                'informacion_2' => $valor_2,
                'informacion_3' => $valor_3,
                'informacion_4' => $valor_4,
                'informacion_5' => $valor_5,
                'informacion_6' => $valor_6
        );

        echo json_encode($arrayjson);
}

espero te sirva, me cuentas como te fue...

0

Espero te sea de ayuda lee la linea del boton submit, y si aún tienes dudas checa el siguiente link donde me resolvieron mi duda, saludos.

https://es.stackoverflow.com/a/195643/57974

<form action="https://docs.google.com/forms/d/e/1FAIpQLSf9vE7kuvaN9Ffuw0pV2kKgi6Hghp8f2KZIqjA-l_j6N4uUdQ/formResponse" method="POST" target="_self" autocomplete="on" _lpchecked="1">
  
  <label for="entry_1022626025">Nombre y Apellido</label>
  <input type="text" name="entry.1022626025" value="" id="entry_1022626025" required="">
  <br>
  <label for="entry_121012742">Email</label>
  <input type="email" name="entry.121012742" id="entry_121012742" required="">
  <br>  
  <label for="entry_1619168523">Celular</label>
  <input type="number" name="entry.1619168523" id="entry_1619168523" required="">
  <br>
  <label class="ss-q-item-label" for="entry_1598229916">Empresa</label>
  <input type="text" name="entry.1598229916" id="entry_1598229916" required="">
  <br>
  <label for="entry_518966266">Ciudad y/o Municipio</label>
  <input type="text" name="entry.518966266" id="entry_518966266" required="">
  <br>
  <label for="entry_1469275999">Comentarios</label>
  <textarea name="entry.1469275999" rows="8" cols="0" id="entry_1469275999" required=""></textarea>
  <br>
  <input type="submit" name="submit" onclick="event.preventDefault();" value="Enviar" id="ss-submit">
  
</form>

3
  • Pero si lo haces así, no tienes ningún modo de saber si el envío de datos ha funcionado, ¿me equivoco? Commented el 11 sept. 2018 a las 5:51
  • Gracias por tu respuesta, pero es que de esa manera no envía el código, no pasa nada de hecho. Commented el 11 sept. 2018 a las 14:12
  • Actualice mi pregunta, para incluir un enlace público a la hoja de calculo de Google donde se recopilan las respuestas cada vez que se diligencie el formulario. Como puedes comprobar en mi demo funciona, pero en tu modificación no pasa nada. Quedo atento a cualquier idea y reitero las gracias. Commented el 11 sept. 2018 a las 14:55

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.