[AJAX] Récupération d'input dont le nombre varie.

Version imprimable

18/02/2009, 13h34
paranoidandroid

[AJAX] Récupération d'input dont le nombre varie.
Bonjour,

Désolé si le sujet a été plus ou moins traité, je n'ai pas vraiment trouvé de soluce adaptée malgré mes recherches.

J'essaye de créer un formulaire (qui n'en est pas vraiment un au sens strict) sur fond de html, en utilisant un ajax qui fait appel à du php pour renseigner ou interroger un bdd.

Quand je dis que ce n'est pas vraiment un formulaire au sens strict, c'est que je n'utilise pas de submit. J'ai plusieurs champs avec plusieurs labels, et certains boutons ont des fonctions javascript associés qui traitent les données ou appellent le php côté srv.

Mon souci :

Mon formulaire se présente sous cette forme,
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form> <p id=fixe> <label></label> <input /> </p> <p id=variable> <label></label> <input /> <input /> <label></label> <input /> <input /> </p> </form>
C'est un peu simplifié hein ... alors je vais peut etre me faire lapider, mais j'utilise pas de div comme j'en vois partout, perso les paragraphes me servent largement pour le peu de mise en forme que j'ai à faire, et je me base sur les ids pour récuperer facilement les différents champs renseignés.

Mon probleme se situe au niveau du 2eme paragraphe.

Pour un label j'ai un nombre fixe d'input (ici 2), je peux avoir autant de labels que je le souhaite > 1.
Si j'ai 4 labels, j'ai donc 8 input au total par exemple.

J'essaye donc de récuperer le nombre d'occurences pour les labels, ainsi que chaque champ input associé. (je ne tourne pas autour du label, c'est juste pour schématiser).

J'ai essayé de jouer avec les ChildNodes, mais je n'arrive pas a trier mon bordel, en jouant avec les propriétés data / nodeName je n'arrive même pas a récuperer les infos comme l'id du champ input et sa valeur saisie.

Le but étant de balancer un xmlhttp.open avec la méthode GET.

Donc voilà je cherche juste a compter le nombre de ligne dans mon paragraphe qui a pour id=variable comme écrit plus haut.

Vous auriez une piste sur la bonne méthode a employer ? c'est mon premier script en javascript et ajax, je fais certainement un truc bien crade.

En vous remerciant.
18/02/2009, 15h45
marcha

Tu peux poster le code que tu as déjà fait ?

Citation:

Envoyé par marcha

Tu peux poster le code que tu as déjà fait ?

Je suis plus ou moins en train de refaire le truc. J'ai viré les labels que j'utilisais un peu par feignantise de toucher au CSS que je n'aime pas trop coder.

En gros on à ça côté php serveur qui va être "echo" au client via ajax:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
...
    <p class='doublelegs'>
	  <label for='wm_warformmaps'>Maps & Score :</label>
	  <input style='width: 25px' id='wm_warformmaps' value='+' onclick='WMAddRemoveLeg(1)' type='button' />
	  <input style='width: 25px' id='wm_warformmaps' value='-' onclick='WMAddRemoveLeg(0)' type='button' />
 </p>
 <p class='simple' id='wm_warlegs'>";
 
			$result2 = db_query("SELECT a.id_war, a.team_score, a.opp_score, a.map
														FROM {$db_prefix}tp_wm_warinfo AS a
														LEFT JOIN {$db_prefix}tp_wm_war AS b
														ON (a.id_war = b.id_war)
														WHERE a.id_war = {$warid}", __FILE__, __LINE__);
 
			if (mysql_num_rows($result2)>0) {
				$nblegs = mysql_num_rows($result2);
				$i=0;
				echo "<input id='wm_warformcountleg' value='{$nblegs}' type='hidden' />";
				while($row2 = mysql_fetch_assoc($result2)) {
					echo "
	  <input id='wm_warformmaps_{$i}' type='text' value='{$row2['map']}' />
	  <input size='2' id='wm_warformhomescore_{$i}' type='text' value='{$row2['team_score']}' />
	  <input size='2' id='wm_warformoppscore_{$i}' type='text' value='{$row2['opp_score']}' />";
					$i++;
				}
			}
		echo "
	  <input id='wm_warformcountleg' value='0' type='hidden' />
 </p>
 <p class='simple'>
	  <input type='button' onclick='WMEditWar({$row['warid']});' value='Edit War' />
 </p>
 </form>";
			mysql_free_result($result2);
			mysql_free_result($result);
    }

Côté JS je suis tjs en train de chercher comment ajouter/retirer des champs input. Pas de souci pour en rajouter, je cherche maintenant à retirer les derniers input.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var addInput_count = 1;
 
function WMAddRemoveLeg(action) {
	if (action == 0) {
		var parent = document.getElementById('wm_warlegs');
		var c = addInput_count--;
		parent.lastChild.removeChild(document.getElementById('wm_warformhomescore_' + legID));
		parent.lastChild.removeChild(document.getElementById('wm_warformoppscore_' + legID));
		parent.lastChild.removeChild(document.getElementById('wm_warformmaps_' + legID));
	}
	else if (action == 1) {
		if (document.getElementById('wm_warformcountleg').value != 0) {
			addInput_count = document.getElementById('wm_warformcountleg').value;
		}
		var c = addInput_count++;
		var parent = document.getElementById('wm_warlegs');
		var objInput1 = document.createElement('input');
		objInput1.setAttribute('id', 'wm_warformmaps_' + c);
		objInput1.setAttribute('type', 'text');
		var objInput2 = document.createElement('input');
		objInput2.setAttribute('id', 'wm_warformhomescore_' + c);
		objInput2.setAttribute('type', 'text');
		objInput2.setAttribute('size', '2');
		var objInput3 = document.createElement('input');
		objInput3.setAttribute('id', 'wm_warformoppscore_' + c);
		objInput3.setAttribute('type', 'text');
		objInput3.setAttribute('size', '2');
 
		parent.appendChild(objInput1);
		parent.appendChild(document.createTextNode(String.fromCharCode(10)));
		parent.appendChild(objInput2);
		parent.appendChild(document.createTextNode(String.fromCharCode(10)));
		parent.appendChild(objInput3);
		parent.appendChild(document.createTextNode(String.fromCharCode(10)));
	}
}

Et ici j'ai tjs dans l'état une tentative de récup des données que j'énoncais plus haut. Pas encore modifié après avoir viré les labels en questions :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function WMEditWar() {
	xmlHttp=getXMLHTTPObject()
	if (xmlHttp==null)
	{
		alert ("Browser does not support HTTP Request")
		return
	}
	// Verification de la saisie des infos
	// Score ?
	var LegsArray = document.getElementById('wm_warlegs').childNodes;
	document.write(LegsArray.length + '<br />');
	for(i=0;i<LegsArray.length;i++) {
		{
			 // store the name of the node and the value of the text node contained within the node
			 var bla = LegsArray.item(i);
			 document.write('name: ' + bla.nodeName + '<br />value : ' + bla.data + '<br /><br />');
		}
	}
 
	if ((document.getElementById('wm_warformdate').value!='')&&(document.getElementById('wm_warformvs').value!=''))
	{
		var url="wm_ajax.php"
		url=url+"?ajax_action=none"
		url=url+"&d="+document.getElementById('wm_warformdate').value
		url=url+"&a="+document.getElementById('wm_warformvs').value
		url=url+"&u="+document.getElementById('wm_warformvsurl').value
		url=url+"&t="+document.getElementById('wm_teamid').value
		url=url+"&tt="+document.getElementById('wm_teamtag').value
		url=url+"&r="+document.getElementById('wm_warformsrc').value
		url=url+"&p="+document.getElementById('wm_warformtopic').value
		xmlHttp.onreadystatechange=stateChanged 
		xmlHttp.open("GET",url,true)
		xmlHttp.send(null)
	}
	else {
		if (document.getElementById('wm_warformdate').value=='') {
			document.getElementById('wm_warformdate').style.backgroundColor = "#FFCC00";
		} else {
			document.getElementById('wm_warformdate').style.backgroundColor = ""; }
 
		if (document.getElementById('wm_warformvs').value=='') {
			document.getElementById('wm_warformvs').style.backgroundColor = "#FFCC00";
		} else {
			document.getElementById('wm_warformvs').style.backgroundColor = ""; }
	}
}

Voili Voilou :/

18/02/2009, 17h37
marcha
Pas sur d'avoir encore tout compris :-) mais bon

le problème avec lastChild c'est que tu va être confronté à
la problématique des noeuds texte parasites. en effet il peut
s'agir d'un TextNode avant la fermeture du parent au lieu
du dernier input.

c'est plus simple d'obtenir une liste des éléments avec
soit
Code:

1 2 3 var liste = parent.getElementsByTagName('input'); // si l'élément est connu // soit var liste = parent.getElementsByTagName('*'); // si tu les veux tous (sans les TextNode)
ensuite tu supprime avec:

Code:

parent.removeChild( liste[liste.length-1] );

Est-ce que tu serais pas tenté d'utiliser un framework comme Jquery pour
ce projet ? ça simplifierai beaucoup les choses.
19/02/2009, 09h05
paranoidandroid
Citation:
Envoyé par marcha

Pas sur d'avoir encore tout compris :-) mais bon

le problème avec lastChild c'est que tu va être confronté à
la problématique des noeuds texte parasites. en effet il peut
s'agir d'un TextNode avant la fermeture du parent au lieu
du dernier input.

c'est plus simple d'obtenir une liste des éléments avec
soit

Code:

1 2 3 var liste = parent.getElementsByTagName('input'); // si l'élément est connu // soit var liste = parent.getElementsByTagName('*'); // si tu les veux tous (sans les TextNode)

ensuite tu supprime avec:

Code:

parent.removeChild( liste[liste.length-1] );

Est-ce que tu serais pas tenté d'utiliser un framework comme Jquery pour
ce projet ? ça simplifierai beaucoup les choses.
Bonjour,

J'ai pensé à l'utilisation d'un framework mais étant donné qu'il s'agit d'une sorte de module qui va se greffer sur un forum smf, j'avais peur des éventuels conflits.

Je vais regarder du côté du var liste = parent.getElementsByTagName('*') et voir ce que ça retourne.

Au final ce que je cherche c'est à avoir 2 boutons add / remove
Un click sur add(+) me rajoute 3 inputs sur la meme lignes. (jusqu'a une éventuelle limite, pourquoi pas)
Un click sur remove(-) me vire la derniere ligne d'input(s'il y en a)
Et la prochaine étape c'est de récuperer efficacement les données des inputs existants (donc d'une ligne ou plusieurs) et les envoyer en bdd, ce sera une autre étape, j'ai vu qu'il y avait pas mal de questions au sujet du transfert de variables sous la forme de tableau avec ajax.

Merci pour ton intervention ;)
19/02/2009, 13h32
paranoidandroid

Bon ben le parent.getElementsByTagName('input') m'a quand même bien soulagé :)

Plus qu'a concatener les valeurs des input avec un caractere d'espacement particulier pour envoyer ça en bdd par un GET.

Encore merci :)