Discussion :

[nickoeuh]

Bonjour.

Ca m'embête de venir vous voir (car j'aime pas qu'on fasse mon boulot) mais je trouve pas ce que je cherche sur le net.
J'ai aucune notion de Javascript et je n'ai pas le temps pour l'apprendre. Je doute d'avoir les capacités d'ailleurs.

Ce que j'aimerais faire est surement très simple pour la plupart d'entre vous.

J'ai un formulaire de contact tout simple avec pseudo, email, objet du message et message. Actuellement, ma vérification se fait en PHP (que j'enlèverai pas) mais pour vérifier que les champs sont remplis, il faut soumettre le formulaire.

Ce que j'aimerais, c'est quand on arrive sur la page, à coté de chaque champ, une croix rouge s'affiche à coté du champ (vu qu'il est vide).
Quand le champ se remplit, la croix rouge se transforme en check vert, sans rechargement de page.

Pourriez-vous m'indiquer comment faire pour un champ input tout simple ?
Est-ce différent pour un textarea ?

Merci beaucoup pour votre aide.

[yann.morineau]

Salut,

Non seulement il va falloir que tu t'intéresses à javascript et en plus à Ajax (un petit peu du moins).

La méthode :

Tes croix doivent être contenus dans des div (ou span) et sur chaque input, un onchange :" verifchamps();" (ceci est un exemple)

et ta fonction verifchamps();

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function verifchamp()  
				{	
							var count = Math.random(); 
							var verifchamp = CreateXMLHttpRequest ();
							var method = 'GET';
							var filename = 'page.php?&count='+count;
							verifchamp.open(method, filename, true);
							verifchamp.onreadystatechange = function(){
 
								if((verifchamp.readyState == 4) && (verifchamp.status == 200))
								{		
									var tmp = verifchamp.responseText;
									document.getElementById('ton div où se trouve la croix').innerHTML = tmp;		
								}
							}	
							verifchamp.send(null);			
				}

La fonction CreateXMLHttpRequest (); permet de connaitre le navigateur utilisé pour creer un nouvel objet XMLhttpRequest.
La voici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function CreateXMLHttpRequest () {
 
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.XMLHttpRequest)
			xhr = new XMLHttpRequest (); 
		else {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
	}
	else
		return null;
 
	return xhr;
}

Aussi dans, la première fonction, variable count (tu lui mets le nom que tu veux ) évite d'avoir deux fois la même requête envoyée. Internet Explorer n'aime pas ça du tout, sans cette variable (qui ne sert à rien d'autre qu'à ça) ta fonction ne fonctionnerait pas sur IE.

C'est un exemple, il y a surement des améliorations à apporter mais ca a le mérite de fonctionner, c'est déjà ça

voili, voili