[JS] boucle et elements formulaire

une seule boucle bien conçue devrait donc suffire, je crois.

Oui, si le <form> l'est également.
Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_2.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_3.jpeg"/>

Puis pour connaître les checkboxes cochées :

var n = document.tonForm.elements["files[]"].length ;
for ( i = 0 ; i < n ; i++ ) {
if ( document.tonForm.elements["files[]"][i].checked ) {
// Affichage de la valeur des checkboxes cochées
alert(document.tonForm.elements["files[]"][i].value) ;
}
}

Sébastien wrote:

Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>

Précision... Tous les crochets en rapport avec le name des checkboxes
sont inutiles si tu ne fais pas de traitement PHP.

Sébastien <nospam@for.me> wrote:

une seule boucle bien conçue devrait donc suffire, je crois.

Oui, si le <form> l'est également.
Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_2.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_3.jpeg"/>

Puis pour connaître les checkboxes cochées :

var n = document.tonForm.elements["files[]"].length ;
for ( i = 0 ; i < n ; i++ ) {
if ( document.tonForm.elements["files[]"][i].checked ) {
// Affichage de la valeur des checkboxes cochées
alert(document.tonForm.elements["files[]"][i].value) ;
}
}

ok je crois que c'est clair.

Merci.

Sébastien <nospam@for.me> wrote:

Sébastien wrote:

Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>

Précision... Tous les crochets en rapport avec le name des checkboxes
sont inutiles si tu ne fais pas de traitement PHP.

par contre, là je ne comprends pas bien ce que tu veux dire...

Sauf erreur, les [] permettent de récupérer ensuite un tableau indexé en
php.

Mais dans le cas présent, n'est-ce pas aussi ce qui permet que les
checkboxes aient des noms distincts (et donc distinguables par quelque
traitement que ce soit) quel que soit leur nombre ?

Sébastien <nospam@for.me> wrote:

Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>

Précision... Tous les crochets en rapport avec le name des checkboxes
sont inutiles si tu ne fais pas de traitement PHP.

par contre, là je ne comprends pas bien ce que tu veux dire...

Sauf erreur, les [] permettent de récupérer ensuite un tableau indexé en
php.

Peut être bien qu'oui ;-)

Mais dans le cas présent, n'est-ce pas aussi ce qui permet que les
checkboxes aient des noms distincts (et donc distinguables par quelque
traitement que ce soit) quel que soit leur nombre ?

? ? ?
toutes tes checkboxes s'apelleront pareil "files[]"
si tu les avais nommées "truc" sans crochet c'eut été le mme résultat
l'array de ces noms se faisant automatiquement par le navigateur
d'où : document.monForm.files[][0]
devrait âtre la 1ière checkboxe rencontrée
d'où : ce devrait foutre le caca dans le js
qui ne comprend + rien à tous ces crochets
d'ou : on emploie
document.monForm.elements['files[]'][0]
= 1er élément du tableau "files[]"
lui-même, élément du tableau "monForm"
ou directement
document.monForm['files[]'][0]
1er élément du tableau "files[]" du tabeau "monForm" du tableau "document"


Variante :

for(var i=0;i<document.monForm.length;i++) {
var e = document.monform[i];
if(e.type=='text'&& e.value=='') {
alert('Remplir '+e.name);
e.focus();
return;
}
else
if(e.type=='checkbox' && e.checked==true) {
if(e.name=='files[]')
fichierChoisi = e.value;
if(e.name=='photos[]')
photoChoisie = e.value;
// etc ...
}
// etc ...
}



--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:stephaneOTER_MOImoriaux@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************

Julien Gautier a dit le 13/09/2004 09:04:

la fonction bouclerait sur tous les champs (cases) dont le nom est
"file"+n (file1, file2, etc.), quel que soit leur nombre; et bien
sûr, du coup, il faut que les paramètres soient modifiés en fonction de
l'index de chaque champ/case... (suis-je clair ?)

Peut-être un truc comme ça...

for(var i=1;;i++)
{
if(!document.forms['form1'].elements['file'+i])
{
break;
}
else
{
// des trucs avec
// document.forms['form1'].elements['file'+i].value
}
}

@SM <stephanemoriaux@wanadoo.fr> wrote:

Mais dans le cas présent, n'est-ce pas aussi ce qui permet que les
checkboxes aient des noms distincts (et donc distinguables par quelque
traitement que ce soit) quel que soit leur nombre ?

? ? ?
toutes tes checkboxes s'apelleront pareil "files[]"
si tu les avais nommées "truc" sans crochet c'eut été le mme résultat
l'array de ces noms se faisant automatiquement par le navigateur

ok, pardon, j'ai fait une confusion...

d'où : document.monForm.files[][0]
devrait âtre la 1ière checkboxe rencontrée
d'où : ce devrait foutre le caca dans le js
qui ne comprend + rien à tous ces crochets
d'ou : on emploie
document.monForm.elements['files[]'][0]
= 1er élément du tableau "files[]"
lui-même, élément du tableau "monForm"
ou directement
document.monForm['files[]'][0]
1er élément du tableau "files[]" du tabeau "monForm" du tableau "document"

ok, je crois que je comprends correctement chaque ligne.

Ces crochets sont donc inutiles (et même presque génants) si l'on s'en
tient à JS.

Variante :

for(var i=0;i<document.monForm.length;i++) {
var e = document.monform[i];
if(e.type=='text'&& e.value=='') {
alert('Remplir '+e.name);
e.focus();
return;
}
else
if(e.type=='checkbox' && e.checked==true) {
if(e.name=='files[]')
fichierChoisi = e.value;
if(e.name=='photos[]')
photoChoisie = e.value;
// etc ...
}
// etc ...
}

Pour vérifier si j'ai bien compris :

cette fonction scrute l'ensemble des valeurs du tableau "monForm" dans
une boucle; pour chaque occurence, il teste son type et sa valeur; par
ailleurs, il interdit l'envoi de tout champ texte vide, et attribue la
valeur des checkboxes cochées à une variable, selon qu'il s'agisse d'un
fichier ou d'une photo.

J'ai bon ?!! ;-)

Julien Gautier <julien.gautier@wanadoo.fr> wrote:

Sébastien <nospam@for.me> wrote:

une seule boucle bien conçue devrait donc suffire, je crois.

Oui, si le <form> l'est également.
Tu peux créer des champs de ce style :

<input type="checkbox" name="files[]" value="fichier_1.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_2.jpeg"/>
<input type="checkbox" name="files[]" value="fichier_3.jpeg"/>

Puis pour connaître les checkboxes cochées :

var n = document.tonForm.elements["files[]"].length ;
for ( i = 0 ; i < n ; i++ ) {
if ( document.tonForm.elements["files[]"][i].checked ) {
// Affichage de la valeur des checkboxes cochées
alert(document.tonForm.elements["files[]"][i].value) ;
}
}

ok je crois que c'est clair.

Bon, en fait, c'était pas si clair que ça... mais maintenant ça l'est
davantage après les explications de Stéphane.

Merci encore.

Ces crochets sont donc inutiles (et même presque génants) si l'on s'en
tient à JS.

Oui, les crochets, bien que non formellement interdits en JS,
sont à éviter le + possible
à ne garder que si on mâtine avec du php,
si on ne veut pas trop se laisser piéger

Variante :

<couic>

J'ai bon ?!! ;-)

Oui Oui 20/20 :-))

Pour ton pb perso j'imagine qu'un truc du genre pourrait faire :

Exemple avec 2 dossiers [serie_1] et [serie_2]
chacun contenant ses textes (html) et ses images (jpeg)
sous la forme
message_x.htm
photo_x.jpg
Les fichiers php devront se débrouiller avec
en variable (ou aray?) $files des valeurs telles que "files[x]"
(certainement à corriger... j'su pas fortiche en php)
Dans cet exemple une variante tout JavaScript est proposée
puisque de ttes façons sans JS pas de PHP non plus !

<html>
<h2>Choisissez une ou des photos
<br>et validez votre choix</h2>
<table widthp%><tr><td>
<form name="serie_1">
<h4>Série 1</h4>
<p>Photo 1 : <input type="checkbox" value="1"/>
<p>Photo 2 : <input type="checkbox" value="2"/>
<p> .../...
<p>Photo 33 : <input type="checkbox" value="33"/>
<p><input type=button value="Valider serie 1 php" onclick="voir(this.form);">
<p><input type=button value="Valider serie 1 JS" onclick="voirEnJs(this.form);">
</form>
<td><td>
<form name="serie_2">
<h4>Série 2</h4>
<p>Photo 1 : <input type="checkbox" value="1"/>
<p>Photo 2 : <input type="checkbox" value="2"/>
<p> .../...
<p>Photo 33 : <input type="checkbox" value="33"/>
<p><input type=button value="Valider serie 2 php" onclick="voir(this.form);">
<p><input type=button value="Valider serie 2 JS" onclick="voirEnJs(this.form);">
</form>
</td></tr></table>
<a href="#" onclick="revel();">REVOIR DERNIER JS</a>
<p><iframe name="myiFrame" width60 height$0 border=1></iframe>
<br><iframe name="myiFrame2" width60 height@ border=1></iframe>

<script type="text/javascript"><!--
function message(numero) {
parent.myiFrame2.location='download_msg.php?file=files['+numero+']';
}
function image(numero) {
parent.myiFrame.location='download.php?file=files['+numero+']';
}
function affiche(numero) {
setTimeout('image('+numero+')',tempo1);
setTimeout('message('+numero+')',tempo2);
tempo1 = tempo1 + 5000;
tempo2 = tempo2 + 5000;
}
function voir(leForm) {
tempo1 = 100;
tempo2 = 2000;
for(var i=0;i<leForm.length;i++) {
var e = leForm.elements[i];
if(e.type=='checkbox' && e.checked==true)
affiche[e.value];
}
}

// variante sans php

var tempo1 = tempo2 = j = 0;
M = new Array();
P = new Array();
function voirEnJs(leForm) {
j = 0;
M = new Array();
P = new Array();
for(var i=0;i<leForm.length;i++) {
var e = leForm.elements[i];
if(e.type=='checkbox' && e.checked==true) {
M[j] = leForm.name+'/message_'+e.value+'.htm';
P[j] = leForm.name+'/photo_'+e.value+'.jpg';
j ++;
}
}
revel();
}
function revel() {
tempo1 = 100;
tempo2 = 2000;
if(P[0])
for(var i=0;i<j;i++) {
setTimeout('parent.myiFrame.location="'+P[i]+'";',tempo1);
setTimeout('parent.myiFrame2.location="'+M[i]+'";',tempo2);
tempo1 = tempo1 + 5000;
tempo2 = tempo2 + 5000;
}
else
alert('Faire un choix puis valider avec bouton JS');
}
// --></script>
</html>


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:stephaneOTER_MOImoriaux@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************

@SM <stephanemoriaux@wanadoo.fr> wrote:

J'ai bon ?!! ;-)

Oui Oui 20/20 :-))

Merci !

Pour ton pb perso j'imagine qu'un truc du genre pourrait faire :
[snip]

j'étudie cela de près....

peut-être vais-je poser quelques questions, car moi c'est en JS que je
ne suis pas fort du tout.


encore merci.