Remember fields in a form in the browser does not work with ajax calls

Question

Remember fields in a form in the browser does not work with ajax calls

Navigation

#1 by (1 votes)

3

When creating a form in the normal way it means:

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

When submitting or submitting the data of each input, they are saved (remembered by the browser) and displayed in the input the next time something similar is typed. For example:

However, doing so through ajax does not save the values.

The ajax call I have is the following:

$.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'
                    )
              }
            }
        });

My question is: How could the auto completion of the inputs be done when sending values through ajax?

javascript jquery ajax

asked by Juan Pinzón 17.01.2017 в 16:57

source

1 answer

MercadoPago Applications does not return user credentials Our site falls from time to time IIS Is it possible that it is a DDOS attack?

score 1 · Answer 1

I do not know if you have already solved this, but I share my idea.

Unfortunately, "signals" can not be sent to the browser to solve a certain intention of a page (eg "save the data in the form in your autocomplete cache" ); besides that it would be something difficult to implement given the infinity of existing browsers; therefore, this behavior is based on standards: the html has a formal standard for sending forms ... and that standard does not involve the use of javascript (ajax).

My recommendation ( not so elegant ) would be to resort to such behaviors: at the moment when your ajax code succeeds with the save operation, instead of redirecting (using window.location.target ), require a submit html of the form, changing the action to a page fake whose only function is to redirect to your new location. The result will be that the browser saves the values in its cache, even if the real operation is done through ajax.

In code it would be something like this:

HTML:

The important part is the attribute action of the form: a page whose function is to redirect the client to a new URL, specified in the same parameter.

<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:

The difference of this code is the replacement of the redirection by window.location to the use of the 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
        });
      }
    }
  });
});

And for the redirection in php (which corresponds to redirect.php in the example) you can do what suggest here .