11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Rechargement de page et Ajax

Bonsoir,

Voici le problème devant lequel je sèche.

Sur une page, j'ai un lien qui en cliquant fait apparaître un DIV.
Le DIV inclue un formulaire d'inscription
Côté HTML voilà ce que cela donne

<h1>Newsletter</h1>
<div id="archivesboutton">
	<a href="#"id="1" class = "lien" title="News Letter - Cliquer par accèder aux formulaire d'inscription" name="1">S'inscrire à la news letter</a>
</div><!-- #archivesboutton -->
<div id="dropper1" class="dropper" style="display:none;">
	<form id="inscription" action="">
		<div id="form">
			<label for="mail-inscription">
			<input id="mail-inscription" name="mail" value="Votre email" title="inscription" type="text" onfocus="if(value=='Votre email') this.value='';" onblur="verifNL();" /></label>
			<input value="OK" name="newslet-submit" id="newslet-submit" type="submit"/>
			<span id="pseudobox"></span>
		</div><!-- #form -->
	</form>
</div>


Le clic sur le lien fait apparaître le formulaire d'inscription.
A la fin de la saisie de l'adresse email, je vérifie en ajax si l'email n'est pas déjà en base, dans le cas contraire j'insère un enregistrement en base et j'affiche un message indiquant l'état du traitement.
Tout cela fonction Smiley smile

Voilà maintenant ce qui coince.
Pour le moment j'ai mis cette vérification via ajax sur le "ONBLUR" de la zone de saisie.
Je souhaiterai la mettre sur le "ONCLICK" de mon Submit, mais au clic, la validation s'effectue avec rechargement de la page, ce qui à pour conséquence :
- de remettre en "display:none;" ma zone contenant le formulaire
- et donc faire disparaitre la zone affichant le message lié au traitement.

Comment faire pour que le onclick ne resoumette pas la page ?
Modifié par Babali (01 Apr 2009 - 08:48)
Ajoute return false; à la fin du du code js qui gère le clic sur le bouton, cela devrait résoudre ton problème.
Merci,
Effectivement je n'ai pas de rechargement de la page Smiley biggrin

Cependant le 
style="display:none;"
est activé.
J'ai donc rajouté avec le return false un 
style=""
, mais ma partie formulaire n'est quand même pas affichée.
Modérateur
Salut Babali. Smiley smile

La partie Ajax est optionnelle; ton formulaire est censé fonctionner sans le moindre ajout de JS, ce qui n'est pas le cas actuellement.

De là, une fois l'application fonctionnelle, tu peux ensuite ajouter un bout de code Ajax afin d'améliorer l'ergonomie en évitant les rechargement de page. Pour cela, il faut faire intervenir ce code sur l'événement "submit" du formulaire (en non sur l'événement "click" du bouton submit) en bloquant l'action par défaut du formulaire afin de conserver la navigation clavier. De même, le lien faisant apparaitre le formulaire et le masquage de ce dernier n'ont lieu d'être que lorsque JS est actif.

Bref, il semble, pour le moment, qu'il y ait un défaut de conception qui nuit à la qualité de ton application.
J'ai attaché mon script JS à l'évènement submit du formulaire. Cependant, après le clic, je formulaire est à nouveau masqué faisant disparaitre le formulaire. Donc le problème est toujours présent.

Pour répondre à Koala64, j'ai prévu un lien qui route vers une page php au cas, ou le JS serait désactivé.
J'ai triouvé la solution en remplaçant le type de mon boutton (j'ai mis BUTON à la place de SUBMIT) ainsi je n'ai pas de problème de réinterprétation de la page.
De plus au cas ou le JS serait désactivé, j'ai un lien sur une page php, qui permet d'effectuer le traitement.
Merci à tous
Sujet clos
Aller à