[RESOLU] Formulaire ajax : Validation avec Enter avec IE8

par **nico44530** » 23 févr. 2013, 14:46

Merci de ta réponse :

1. Oui ma page est valide et fonctionne
2. J'ai essayé Onsubmit="return false" sur l'input submit, mais ça ne fonctionne pas
3. Si je met une vrai action, il faut que je modifie le script ajax, et je sais pas comment faire
4. Ce sélecteur, je l'ai supprimé, il ne sert à rien ^^
5. Le premier settimeout va faire patientez l'internaute jusqu'à la phrase : Vous êtes bien connecté. Et le second submit, c'est de faire patientez jusqu'à une redirection vers la page.
6. Mon formulaire utilise ajax et est intégré dans une lightbox, donc si on désactive JS c'est mort

Pour éviter ces problèmes, je pense refaire une page de connexion avec un formulaire sans lightbox, et le script PHP qui traite le formulaire sera en haut de la page connexion, pour afficher les erreurs c'est mieux.

Par contre, je vais utiliser de l'ajax à l'intérieur de la page membre, donc si on désactive Javascript, j'afficherais un message d'erreur pour que l'internaute active javascript

(Comme sur Facebook)

par **niuxe** » 23 févr. 2013, 13:24

Salut,

1. Est ce que ta page est valide ?
2. vire l'attribut onsubmit dans ton form.
Utilise plutôt preventDefault au mieux ou return false au pire dans ton submit

[javascript]
$("...").submit(function(event){
//....
event.preventDefault;
});
[/javascript]

3. mettre une vrai action dans ton form
4. C'est quoi ce sélecteur ?

Code : Tout sélectionner

$("#form-login > form#formlogin")

Tu perds des perfs pour rien
5. pourquoi deux setTimout ?
6. Si tu coupes le JS :
6.1 est ce que la soumission du form fonctionne ?
6.2 est ce que la soumission du form avec une touche du clavier fonctionne ?

par **nico44530** » 23 févr. 2013, 03:15

Bonjour,

Avec seulement IE, mon submit ne fonctionne pas lorsque j'appuie sur la touche Enter.
Pourtant c'est un input type="submit"

Voici le code :

<div id="form-login">
								<form method="post" action="" onsubmit="return false" class="form" id="formlogin">
									<table>
										<tr><td><label class="form-login-label">Nom d'utilisateur</label></td></tr>
										<tr><td><input type="text" name="pseudo" id="pseudo" class="form-login-input" maxlength="23" /></td></tr>
										<tr><td><label class="form-login-label">Mot de passe</label></td></tr>
										<tr><td><input type="password" name="password" id="password" class="form-login-input" maxlength="30" /></td></tr>
										<tr>
											<td>
												<input type="checkbox" id="checkbox" name="check" class="checkbox" />
												<label class="check" for="checkbox">Rester connecté</label>
												<label class="mdp">|&nbsp; <a>Mot de passe perdu</a></label>
											</td>
										</tr>
										<tr>
											<td>
												<input type="submit" class="login" id="login" value="" />
												<div id="ajax_loading" style="display: none;">
													<img src="img/spinner.gif" /><p class="mini">Connexion en cours...</p>
												</div>
											</td>
										</tr>
										<tr><td></td></tr>
									</table>
								</form>
							</div>

Et le code Ajax :

[javascript]
img1 = new Image(16, 16);
img1.src="../img/spinner.gif";
$("#form-login > form#formlogin").submit(function(){
$('#login').hide();
$('#ajax_loading').show();
var str = $(this).serialize();

setTimeout(function() {
$.ajax({
type: "POST",
url: "../ajax/login.php",
data: str,
success: function(msg){

$("#form-login").ajaxComplete(function(event, request, settings){
$('#login').show();
$('#ajax_loading').hide();

if(msg == 'OK'){
$('#close-dialog-login').hide();
$('a.register').hide();
$('span.separe').hide();
$('#dialog-login').slideDown('slow');
$('#login_response').hide();
$('#form-login').css({
'background-color': '#54ff75',
'border': '1px solid #005a16',
'color': '#004110',
'padding': '5px',
'font-weight': 'bold',
'text-align': 'center',
'line-height': '15px'
});
var login_response = 'Vous êtes bien connecté !' + '<br />' + 'Redirection automatique, veuillez patientez...';
$(this).html(login_response);

setTimeout(function() {
window.location = '../index.php';
}, 3000);
}
else {
var login_response = msg;
$('#login_response').fadeIn();
$('#login_response').html(login_response);
}
});
}
});
}, 2000);
});
[/javascript]

La page login.php appelée par ajax :

<?php
session_start();
require('../include/functions.inc.php');

$pseudo = $_POST['pseudo'];
$pass = $_POST['password'];

if (!empty($pseudo) && !empty($pass))
{
	$sql = connect_sql();
	$sql = 'SELECT id FROM wa_communaute WHERE pseudo="'.mysql_escape_string($_POST['pseudo']).'" AND pass="'.mysql_escape_string(md5($_POST['password'])).'"';
	$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
	$nb = mysql_num_rows($req);
		if ($nb == 1) {
			$data = mysql_fetch_array($req);
			$_SESSION['pseudo'] = $_POST['pseudo'];
			$_SESSION['id'] = $data['id'];
			setcookie("pseudo", $_POST["pseudo"], time() + 90 * 24 * 60 * 60, "/");
			echo 'OK';
		}
		elseif ($nb == 0) {
			echo 'Vos identifiants sont incorrects !';
		}
	mysql_free_result($req);
	mysql_close();
}
else {
    echo 'Veuillez remplir tous les champs !';
}
?>

Merci pour votre aide

[RESOLU] Formulaire ajax : Validation avec Enter avec IE8

Répondre

Étendre la vue Revue du sujet : [RESOLU] Formulaire ajax : Validation avec Enter avec IE8

Re: Formulaire ajax : Validation avec Enter avec IE8

Re: Formulaire ajax : Validation avec Enter avec IE8

Formulaire ajax : Validation avec Enter avec IE8