Form HTML avec plusieurs INPUT dynamique portant le même nom

[ggbce]

Bonjour,

 

J'ai une page web dans laquelle je dois rendre le contenu interactif. C'est un simple tableau dans lequel je récupère les données d'une base de données MySQL. Lorsque ce tableau est affiché, les champs doivent être éditable. La j'ai un problème de savoir comment passer l'information au FORM pour le champ en question... puisque c'est une liste d'éléments similaires. Je vais expliquer en code ce sera plus simple:

<form name="add" enctype="multipart/form-data" method="post" action="update.php"><input type="hidden" name="actfrm" id="actfrm" value="1"><input type="hidden" name="year_id" id="year_id" value="0"><!-- Entête --><table><tr><td>Date</td><td>Quantité</td><td>Action</td></tr><!-- Fin de l'entête --><!-- Éléments récupérés par une requête PHP d'une BDD MySQL --><tr><td>1980</td><td><input type="text" name="year_qty" size="10" maxlength="3" value="113"></td><td><img src="mod.gif" onclick="document.getElementById('actfrm').setAttribute('value','2');document.getElementById('year_id').setAttribute('value','1980');document.getElementById('year_qty').setAttribute('value','???');document.add.submit()"></td></tr><tr><td>1994</td><td><input type="text" name="year_qty" size="10" maxlength="3" value="250"></td><td><img src="mod.gif" onclick="document.getElementById('actfrm').setAttribute('value','2');document.getElementById('year_id').setAttribute('value','1994');document.getElementById('coin_qty').setAttribute('value','???');document.add_unique_coin.submit()"></td></tr><!-- Fin des éléments récupérés par une requête PHP d'une BDD MySQL --><!-- Champs pour une nouvelle entrée --><tr><td><input type="text" name="year_id" size="10" maxlength="4"></td><td><input type="text" name="year_qty" size="10" maxlength="3"></td><td><img src="add.gif" style="cursor:pointer" onclick="document.getElementById('actfrm').setAttribute('value','3');document.add.submit()"></td></tr><!-- Fin des champs pour une nouvelle entrée --></table></form>

P.S. Le INPUT actform sert uniquement pour l'action MySQL à entreprendre après le POST. Si c'est une ligne existante à modifier, c'est = 2 qui veut dire SQL UPDATE et si c'est = 3 ça veut dire SQL INSERT INTO.

 

Le problème est que chaque ligne du tableau dynamique possède la même répétition du champ INPUT avec le même name/id. Je ne peux pas non plus créer un INPUT unique pour chaque ligne... puisque de la page "d'écoute" du FORM ne peut pas être dynamique aussi dans le même sens:

 

$year_qty = $_POST['year_qty'];

 

et non

 

$year_qty1 = $_POST['year_qty1'];

$year_qty2 = $_POST['year_qty2'];

$year_qty3 = $_POST['year_qty3'];

etc.

 

Si j'ai 2000 lignes j'aurais un formulaire qui grossirait toujours autant qu'il y a de lignes...

 

Lorsque je presse le bouton SUBMIT, le dernier champ avec le <INPUT name="year_qty"> est celui qui est capturé par le FORM et pas nécessairement celui que je veux modifier.

 

J'ai pensé utiliser la méthode par JavaScript de remplacement de la valeur du champ:

document.getElementById('year_qty').setAttribute('value','???') au moment du SUBMIT... mais comment alimenter la valeur de l'attribut dans l'action JavaScript avec la même valeur que je viens tout juste de modifier manuellement dans le INPUT au lieu du '???'...

 

Je suis à court d'idée !

 

-------------------------

 

Je sais que je pourrais simplement avoir mon bouton "modifier" sur lequel je presse pour ouvrir une nouvelle page web dans laquelle je récupère uniquement le ID de ma ligne et je pourrais créer mon formulaire dans cette nouvelle page... mais je dois rendre la page web dynamique sans la quitter.

 

Merci de votre aide !

[piwi82]

Regarde ce que contient $_POST :

var_dump($_POST); 

Les valeurs sont peut-être accessibles avec :

$_POST['year_qty'][0]$_POST['year_qty'][1]$_POST['year_qty'][2] 

Sinon essaye en définissant les noms comme des tableaux :

<td><input type="text" name="year_id[]" size="10" maxlength="4"></td><td><input type="text" name="year_qty[]" size="10" maxlength="3"></td>

[Elegath]

Bonjour, en fait de mon côté, j'aurai fait une boucle while en php avec non pas un formulaire unique qui grossirait au fur et à mesure de ton tableau mais plutôt un formulaire qui se créerait par ligne.

Après c'est une façon de tricher comme une autre...

[cadegenere]

Et en mettant la valeur de l'input "year_qty" de la ligne qui t'interesse dans un input hidden "year_qty_hidden" avec du javascript, et en prenant en compte cette dernière valeur dans le POST ? Comme tu as fait pour actfrm et year_id en fait ?

Je ne suis pas un pro du javascript, mais tu devrais pouvoir faire un truc du genre non ?

onclick="document.getElementById('year_qty_hidden').setAttribute('value',document.getElementById('year_qty1').value;);"

avec le year_qtyX qui change à chaque ligne ?

[ggbce]

Salut Cadegenere,

 

Effectivement c'est ce que je voulais faire au début... mais en fait ça ne peut pas fonctionner... puisque la valeur inscrite dans le champ attribute de JavaScript va probablement se charger dans le champ "HIDDEN" en fin de page... mais le problème serait une question de lourdeur lorsque le tableau contiendrait plusieurs centaines/milliers de lignes.

 

Même si je pousse dans ce dernier champ HIDDEN, chaque ligne ayant un INPUT différent serait envoyée quand même dans le POST du FORM... à moins qu'il existe une méthode pour créer des INPUT qui seraient en "exclusion" du FORM

 

NOTE: mon exemple ne contient que 2 colonnes, mais en réalité il y aurait beaucoup plus de colonne par lignes... donc si on prend exemple de 1000 lignes et 10 colonnes = 10 000 variables à placer dans le POST... pour en modifier qu'une seule ligne de 10 valeurs.

 

 

 

 

 

[cadegenere]

Bonjour ggbce,

 

Je viens de tester vite fait, si tu ne mets pas de "name" à un input, à priori il n'est pas envoyé (au moins en GET, je n'ai pas testé en POST).

Ça peut être une bidouille pour n'envoyer que les champs qui t'interessent.

 

Ce que je viens de tester :

<form method="get"><input type="hidden" name="test" id="test"><p>input1<br><input type="text" id="input1"><input type="submit" onclick="document.getElementById('test').setAttribute('value',document.getElementById('input1').value);"><p>input2<br><input type="text" id="input2"><input type="submit" onclick="document.getElementById('test').setAttribute('value',document.getElementById('input2').value);"><p></form>

[ggbce]

Finalement j'ai trouvé comment faire !

 

1- J'ai sorti toutes les lignes du tableau du FORM afin que celles ci ne soient pas transmises dans le POST

 

2- J'ai généré en PHP un nom incrémentiel du ID/Name des INPUT qui ne son pas dans le FORM et je fais un remplacement de la valeur d'un autre INPUT unique qui est dans un FORM plus bas dans le code de la page.

<img src="modifier.gif" onclick="document.getElementById('actfrm').setAttribute('value','2');document.getElementById('coin_id').setAttribute('value','".$data['id']."');document.getElementById('coin_qty').setAttribute('value',document.getElementById('coin_qty_mod".$ij."').value);document.getElementById('coin_state_update').setAttribute('value',document.getElementById('coin_state_mod".$ij."').value);document.add_unique_coin.submit()">

3- Le FORM et les INPUT à modifier sont au bas de la page dans le code et ils se font modifier par le SetAttribute !