ajax - traves - autocompletar php

Cómo almacenar en el navegador autocompletar/autocompletar cuando usa llamadas AJAX

Question

Me di cuenta de que los navegadores no almacenan los valores del formulario hasta que se envía el formulario, lo que significa que si está utilizando AJAX en lugar de enviar un formulario estándar, nunca se completará el autocompletado de su navegador. ¿Hay alguna forma de forzar que los navegadores rellenen automáticamente / completen automáticamente para que pueda tener esta comodidad con los formularios que se envían a través de AJAX? Es molesto ir a mi página AJAX y tengo que escribir las mismas cosas en los campos del formulario cada vez porque el navegador no los recuerda.

Mi pregunta es bastante idéntica a la de este , excepto que solo se proporciona una solución en Firefox como respuesta aceptada a esa pregunta. Estoy buscando una solución que funcione en todos los principales navegadores (al menos Chrome, FF e IE), si es que hay uno.

Nota: No estoy hablando de los complementos de autocompletar de AJAX, que es lo que casi siempre aparece al buscar en Google esta pregunta. Estoy hablando del autocompletado o autocompletado de tu navegador que te ayuda a completar formularios al recordar lo que ingresaste en el pasado.

Answer 1

¿Has probado la respuesta a mi pregunta que mencionas? La respuesta es usar iframe oculto, pero parece que afirma que la idea no funciona en IE y Chrome en ese momento.

Intente tomar la idea, y en lugar de usar el iframe oculto, simplemente ponga el nombre de usuario / contraseña / enviar el elemento de entrada visible en un formulario POST, en un iframe. Entonces, el usuario ingresará los detalles de inicio de sesión directamente en iframe. Con el Javascript adecuado puedes poner la imagen de carga, obtener éxito o denegarlo del servidor y actualizar el padre o la página completa. Creo que debería funcionar en cualquier navegador.

O si aún desea usar AJAX ya que probablemente implementó la API en el lado del servidor. Puede hacer que el iframe simplemente envíe un POST ficticio al mismo tiempo, envíe el usuario / pase real a la URL AJAX.

O bien, vuelve a utilizar el iframe oculto, no para ocultarlo, sino para moverlo al área invisible como top: -1000px .

Answer 2

Después de varias horas buscando, encontré una solución en Trigger autocompletar sin enviar un formulario .

Básicamente, utiliza un iframe oculto en la misma página, establece la acción de su formulario en el ''src'' del iframe y agrega un botón de envío oculto dentro del formulario, cuando el usuario hace clic en el botón que activa las solicitudes AJAX, debe programarlo haga clic en el botón oculto antes de enviar la solicitud AJAX. vea el siguiente ejemplo:

En tu página de formulario:

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

Luego script java:

$(''#go_button'').click(function(event){
    //submit the form to the hidden iframe
    $(''#submit_button'').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

Espero que esto ayude.

Answer 3

Para cualquiera que todavía esté tratando de resolver esto, parece que encontré la answer .

Chromium intenta reconocer el evento de envío, incluso si previene Default y maneja el envío real usted mismo.

Eso es todo, debe preventDefault el evento de envío predeterminado, no el evento de clic .

Esto funcionó en Chrome, Edge e IE 11 en el momento de escribir esto (soy demasiado flojo para descargarlo y probarlo en Firefox). Aquí está su formulario:

<form method="POST" id="my-form">
  <label>Email</label>
  <input autocomplete="email" type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Observe el atributo de autocomplete . Estos son todos los valores posibles que puede usar para autocomplete .

En JavaScript, simplemente haz esto:

$("#my-form").on("submit", function (ev) {
  ev.preventDefault();

  // Do AJAX stuff here
});

El navegador recordará cualquier correo electrónico que haya ingresado al hacer clic en el botón Suscribir.

Answer 4

También me he encontrado con esto; no parece haber una gran solución, ciertamente no una de navegador cruzado, pero aquí hay una para IE que no he visto a nadie mencionar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

Desde: http://support.microsoft.com/kb/329156

Answer 5

Use este método:

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement(''iframe'');
    iframe.name = ''uniqu_asdfaf'';
    iframe.style.cssText = ''position:absolute; height:1px; top:-100px; left:-100px'';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = ''uniqu_asdfaf'';
    form.action = ''/favicon.ico'';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

Probado con ie10, ff latest, crome latest

Ponte a prueba: http://jsbin.com/abuhICu/1