3

Al crear un formulario de la forma normal es decir:

<form action="index.html" method="post">
</form>

Al enviar o hacer submit de los datos de cada input estos se guardan(los recuerda el navegador) y se muestran en los input la siguiente vez que se teclea algo parecido. Por ejemplo:

Form

Sin embargo al hacerlo mediante ajax no se guardan los valores.

La llamada ajax que tengo es la siguiente:

$.ajax({
            type: "POST",
            dataType: 'json',
            data: {
                    'id_documento_interno': id_documento_interno,
                    'nro_documento': nro_documento,
                    'tipo_documento': tipo_documento,
                    'codigo_documento': codigo_documento,
                    'peticionario_documento': peticionario_documento,
                    'jefatura_documento': jefatura_documento,
                    'asunto_documento': asunto_documento,
                    'hojas_documento': hojas_documento,
                    'fecha_documento': fecha_documento,
                    'observacion_documento': observacion_documento
                  },
            url: "<?php echo base_url();?>"+"general/documento/actualizarInternoPorId",
            success : function(data) {
              if (data == '1') {
                swal({
                      title: 'Correcto!',
                      text: 'Tramite Ingresado Correctamente! Para enviarlo vaya a la seccion enviar.',
                      type: 'success',
                      showCancelButton: true,
                      confirmButtonColor: '#3085d6',
                      cancelButtonColor: '#d33',
                      confirmButtonText: 'Continuar',
                      cancelButtonText: 'Cancelar'
                    }).then(function () {
                      $('#addinterno').modal('close');
                      $("#agregarinterno")[0].reset();
                      console.log("Generado");
                      window.location.href = "generados";
                    });

              }else {
                swal(
                      'Error!',
                      'Ha ocurrido un error generando trámite, contacte al administrador!',
                      'error'
                    )
              }
            }
        });

Mi pregunta es: ¿Cómo se podría hacer funcionar el autocompletado de los inputs cuando se envian valores a través de ajax?

4
  • 1
    Es una muy buena pregunta! Si en el submit del form haces return false; o si haces evt.preventDefault(); no se guardan. El tema es que si no lo haces, el form se envía...
    – Marcos
    Commented el 17 ene. 2017 a las 17:00
  • Tienes razón, aunque en este caso solo estoy enviando los datos por ajax, usando la funcion on() de jquery, $('#boton').on('click',function(){//llamada ajax}); no hago uso de submit Commented el 17 ene. 2017 a las 17:08
  • 1
    Te dejo el enlace a una solución alternativa mientras indago mas sobre el tema.
    – Marcos
    Commented el 17 ene. 2017 a las 17:12
  • Gracias @MarcosGallardo ahora reviso el enlace, :) Commented el 17 ene. 2017 a las 17:33

1 respuesta 1

1

No sé si ya has resuelto esto, pero te comparto mi idea.

Desgraciadamente no pueden enviarse "señales" al navegador para que resuelva cierta intención de una página (p.ej. "guarda los datos en el formulario en tu caché de autocompletado"); además de que sería algo difícil de implementar dada la infinidad de navegadores existentes; por lo tanto dicho comportamiento se basa en estándares: el html tiene un estándar formal para envío de formularios... y en dicho estándar no está involucrado el uso de javascript (ajax).

Mi recomendación (no tan elegante) sería recurrir a dichos comportamientos: en el momento en que tu código ajax tiene éxito con la operación de guardado, en vez de redireccionar (usando window.location.target), requerir un submit html del formulario, cambiando la acción hacia una página fake cuya única función sea la de redireccionar a tu nueva ubicación. El resultado será que el navegador guarde los valores en su caché, aunque la operación real sea realizada mediante ajax.

En código sería algo así:


HTML:

La parte importante es el atributo action del formulario: una página cuya función sea redirigir al cliente a una nueva URL, especificada en el mismo parámetro.

<form id="forma" action="redirect.php?url=generados" method="post">
  <div>
    <label for="numeroSerie">Numero de serie:</label>
    <input id="numeroSerie"/>
  </div>
  <!-- etc. -->
  <div>
    <button id="guardar">Guardar</button>
  </div>
</form>

Javascript:

La diferencia de este código es el reemplazo de la redirección mediante window.location al uso del submit html.

$('#guardar').on('click', function(event) {
  // evitar que se lance el submit por defecto
  event.preventDefault();

  // intentar operación ajax
  $.ajax({
    type: 'POST',
    datatype: 'JSON',
    data: {
      // datos del formulario a enviar
    },
    url: 'url_que_guarda_el_formulario.php',
    success: function(data) {
      if (data == 1) {
        swal({
          // configuración del swal: éxito
        }).then(function() {
          // reiniciar estado

          // ... y después lanzar submit del formulario html
          $('#forma').submit();
        });
      }
      else {
        swal({
          // configuración del swal: error
        });
      }
    }
  });
});

Y para la redirección en php (lo que corresponde a redirect.php en el ejemplo) se puede hacer lo que se sugiere aquí.

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.