completamento automatico del browser nativo per moduli generati dinamicamente (gestiti con ajax)

Question

Generalmente sto generando un modulo. Per semplicità, supponiamo che sia un modulo di accesso con e-mail/password. Il modulo viene inviato, ma inviainvia una richiesta AJAX che gestisce il login effettivo e l'evento di invio viene annullato (e.preventDefault()).

Io uso e.preventDefault() per annullare l'azione predefinita della forma, cioè, andare alla pagina in 'azione' ma questo sembra anche di annullare il rilevamento di completamento automatico del browser.

Penso che è necessario a fullfill diversi requisiti per il completamento automatico nativo di lavorare:

• Il vostro campo di input type="text" deve avere un name
• Il modulo deve essere presentato < - questo non è davvero accadendo nel mio caso

La mia analisi è corretta e c'è un modo per eseguire il completamento automatico in questo caso?

---

per scongiurare il fanboy: Io non sto cercando una soluzione che coinvolge jQuery o [inserire il quadro], voglio utilizzare la funzione nativa del browser di completamento automatico. Non ho una lista di parole che voglio completare automaticamente.

Answer 1

DMoses soluzione notevolmente ispirato la mia soluzione, ma c'è una differenza significativa così ho pensato che sarebbe stata una buona idea per fare la mia soluzione, la bontà va a DMoses però: P

soluzione DMoses si muove (o copie) il modulo per l'iframe e quindi lo invia. Il motivo per cui vuoi farlo è che il tuo 'genitore' non viene ricaricato. Esiste una soluzione più semplice: inviare il modulo all'iframe. Funziona allo stesso modo e non è necessario copiare alcun nodo.

Questo passaggio è interamente ripetibile. L'unico svantaggio è che non si controlla quando viene aggiunta esattamente una voce di completamento automatico. Potresti voler aggiungere solo voci valide, ma almeno questo caso riproduce perfettamente il modo in cui si comporterebbe una forma normale se non fosse coinvolto alcun Ajax. Se si desidera controllare ciò che viene aggiunto al completamento automatico, utilizzare la soluzione DMoses, copiare il modulo e inviarlo nell'iframe.

Per me, questo è sufficiente:

<form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe"> 
    <input id="foo" name="foo"/> 
    <input type="submit" /> 
</form> 
<iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you'll want this hidden --> 

La parte migliore: non è richiesta alcuna JavaScript in più per fare questo lavoro! (oltre a generare un ID/nome univoco per il modulo, ma è super banale).

jsFiddle: http://jsfiddle.net/KzF6s/13/

Answer 2

Ok ho trovato un modo contorto per fare questo:

Ecco il javascript:

function ajaxit() { 
    var iFrameWindow = document.getElementById("myframe").contentWindow; 
    iFrameWindow.document.body.appendChild(document.getElementById("myform").cloneNode(true)); 
    var frameForm = iFrameWindow.document.getElementById("myform"); 
    frameForm.onsubmit = null; 
    frameForm.submit(); 
    return false; 
} 

Ecco il codice html:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on"> 
    <input id="foo" name="foo"/> 
    <input type="submit" /> 
</form> 
<iframe id="myframe" src=""></iframe> <!-- you'll want this hidden --> 

clic su Invia verrà eseguito l'ajaxit() metodo. il metodo crea lo stesso modulo in un iframe e lo invia al server. È possibile scegliere di inoltrare la richiesta del server oppure è possibile eseguire una richiesta Ajax separata e ignorare l'iframe.

So che è brutto, ma funziona.

MODIFICA: qui è un jsbin con cui giocare.

Answer 3

Dopo fare in giro un po 'con i violini a commenti su soluzioni altre risposte, ho deciso di fare questa lista per tutti coloro che vedono l'ora per i browser per gestire correttamente questo.

Così, come una sintesi, queste versioni del browser supportano completamento automatico valori su forme generati con JavaScript:

• FireFox 25
• Chrome 33 (versione attuale è 31, quindi a breve)
• Internet Explorer 11 (reference)