Chrome vous propose d’enregistre votre login / mot de passe quand vous submitez un form de connexion.

Typiquement il se base sur le fait qu’il y a un input text, suivi d’un input password.

Le problème est que si on souhaite logger un user sans rechargement de page, on passe par une requete ajax, et Chrome ne le detecte pas et donc n’enregistre pas les login / password du user.

 

Pour parer à ce problème, il faut absolument que le form soit submit ! En submitant le form, on recharge la page, ce que l’on ne veut pas. Il faut donc trouver un moyen pour submit sans recharger !

C’est possible ! L’attribut target dans la balise form et une iframe vont nous aider à faire ce petit trick.

On place une iframe en display:none avec un id= »mon_iframe », et dans la balise form, target= »mon_iframe »

Dans le form on a normalement notre onsubmit= »ajaxLogin();return false; » => return false permettant de ne pas submit, on l’enleve car on veut submit !

Puis dans l’action du form, on renvois sur un page qui ne fait rien : action= »nothing.php ».

 

Avec tout ça mis en place, le formulaire va envoyer les données à l’adresse nothing.php et le resultat va s’afficher dans l’iframe, et la window ne va pas se recharger !

En parallele, le onsubmit est bien triggered, et notre call vers le login est bien lancé !

Finalement, Chrome (ou autre navigateur) voit l’action du submit de formulaire et propose donc bien d’enregistrer les login / password de l’user !!

 

<?php
if(isset($_POST['submit'])){
echo "true";
exit;
}
?><html>
<head>
<script type="text/javascript">
function ajaxSubmit(){
//ajax call

}
</script>
</head>
<body>
<div style="display:block;">
<form action="ajaxform.php" method="POST" onsubmit="ajaxSubmit();return true;" target="targetform">
<input type="text" name="blu" value=""/><br/>
<input type="password" name="blublu" value=""/><br/>
<input type="submit" name="submit" value="submit"/>
</form>
<iframe src="ajaxform.php" id="targetform" style="display:none;"></iframe>
</div>
</body>
</html>