Discussion :

[lazarel]

Bonjour,


Je souhaiterais mettre en place une fonction javascript qui soit capable de redéfinir l'URL dynamiquement dans le cas des paramètres à valeurs multiples.

J'ai un formulaire dans lequel j'ai un select avec une sélection multiple de la forme suivante:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<form >
<select name="state[]" multiple="multiple" size="5">
<option value="e0">e0</option>
<option value="e1">e1</option>
<option value="e2">e2</option>
<option value="e3">e3</option>
</select>
<br/>
<input type="submit" value="Test"/>
</form>

Si je clique sur le bouton Test je retrouve dans mon URL la ligne suivante:

Code URL :

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

?state=e0&state=e1&state=e2&state=e3&...

Ce que je souhaite simplifier cette ligne de la façon suivante:

Code URL simplifié :

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

?state=e0,e1,e2,e3&...

Je sais comment récupérer le mon élément

Code javascript :

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

document.getElementsByName("state");

Par contre je ne sais pas comment récupérer le tableau associé à cet élément et redéfinir l'URL dynamiquement une fois le formulaire validé.

Je suis novice en Javascript, j'espère que quelqu'un pourra m'apporter son aide.

Cordialement Lazarel

[E.Bzz]

Bonjour,
dans le cas d'une liste multiple, les différentes sélections sont envoyées au serveur, en POST, justement sous forme de liste séparée par des virgules.
Il suffit peut être juste de changer la méthode de ton form, non ?
(et peut être d'enlever les [] du name)

A+

[htr999]

tu pourrais ajouter les id à chaque champs option...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<form >
<select name="state[]" multiple="multiple" size="5">
<option id="e0" value="e0">e0</option>
<option id="e1" value="e1">e1</option>
<option id="e2" value="e2">e2</option>
<option id="e3" value="e3">e3</option>
</select>
<br/>
<input type="submit" value="Test" onclick="alert(document.getElementById('e1').selected);"/>
</form>

[htr999]

Bonjour,
dans le cas d'une liste multiple, les différentes sélections sont envoyées au serveur, en POST, justement sous forme de liste séparée par des virgules.
Il suffit peut être juste de changer la méthode de ton form, non ?
(et peut être d'enlever les [] du name)

A+

je pense qu'avec POST ou GET, la réponse transmise au serveur sera toujours par exemple de la form

Code :

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

1
2
 
...&state[]=e0&state[]=e3...

donc si tu veux récupérer tous les choix, il me semblerait que ce soit nécessaire d'utiliser un tableau

[E.Bzz]

je pense qu'avec POST ou GET, la réponse transmise au serveur sera toujours par exemple de la form

Code :

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

1
2
 
...&state[]=e0&state[]=e3...

donc si tu veux récupérer tous les choix, il me semblerait que ce soit nécessaire d'utiliser un tableau

Non (testé) !
Avec

Code :

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

<select name="state" multiple>

tu récupéreras "&state=e0,e3" par exemple.
Ce fonctionnement est peut être dû aux [], justement (mais j'utilise pas cette syntaxe, visiblement liée à PHP) ...

A+

[htr999]

ah ok au temps pour moi
j'ai peut-être l'habitude avec les form en php

[lazarel]

Et bien,


Merci toutes ces réponses . En fait l'idée est de pouvoir modifier l'URL avant que celle-ci soit envoyée au serveur.

Dans mon cas, une fois le formulaire validé je fais appel à une servlet qui est chargée de me renvoyer un rendu html ou pdf pour faire du reporting avec BIRT.

Comme parfois les paramètres utilisés sont longs et peuvent prendre plusieurs valeurs l'URL devient vite illisible. Je souhaite donc simplifier cette URL au maximum pour avoir quelque chose de plus propre.

Peut être est ce plus clair maintenant

Cordialement Lazarel

[E.Bzz]

Ben ... c'est plutôt moins clair

Si je clique sur le bouton Test je retrouve dans mon URL la ligne suivante:

Code URL :

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

?state=e0&state=e1&state=e2&state=e3&...

Ce que je souhaite simplifier cette ligne de la façon suivante:

Code URL simplifié :

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

?state=e0,e1,e2,e3&...

La réponse est : si tu passes ton form en POST (cas par défaut), et que tu enlèves les crochets du name, tu auras ce résultat.
As-tu essayé ?

A+

[lazarel]

Re,

Bon voilà j'ai suivi le conseil de E.Bzz et j'ai pu mettre au point ce que je souhaitais.

D'abord le form

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<form id="myform" method="post" action="http://localhost/javascript/encodeURI.php">
<select id="state" name="state" multiple="multiple" size="5">
<option value="e0">e0</option>
<option value="e1">e1</option>
<option value="e2">e2</option>
<option value="e3">e3</option>
<option value="e4">e4</option>
</select><br/>
<input type="button" value="Test" onclick="myURI()"/>

Ensuite la fonction myURI()

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function myURI(){
 
var x = document.getElementById("myform");
var t = document.getElementById("state");
var tmp = new Array();
 
for (var i=0; i < t.length; ++i){
  if (t.options[i].selected==true)
    tmp.push(t.options[i].text);
  }
x.action += "?"+t.name+"="+tmp.join(",");
x.submit();
}

Maintenant à la validation de mon formulaire j'ai l'URL suivante:

Code URL :

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

1
2
 
http://localhost/javascript/encodeURI.php?state=e0,e1,e4

Maintenant il me reste plus qu'à mettre en place une méthode générique lorsque que j'ai plusieurs champs

Cordialement Lazarel

[E.Bzz]

Tu as vérifié ce que tu récupères sur le serveur avec

Code :

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

1
2
3
4
5
6
7
8
9
10
<form id="myform" method="post" action="http://localhost/javascript/encodeURI.php">
<select id="state" name="state" multiple="multiple" size="5">
<option value="e0">e0</option>
<option value="e1">e1</option>
<option value="e2">e2</option>
<option value="e3">e3</option>
<option value="e4">e4</option>
</select><br/>
<input type="submit" value="Test"/>
</form>

Parce que encore une fois, le résultat devrait être le même (sans JS, et donc quelque soit le nombre de <select> du form) ...

Loin de moi l'idée de vouloir insister

A+

[lazarel]

Eh bien,


Tu as raison d'insister car le résultat est le même

J'avoue ne pas comprendre normalement la méthode POST est sensée caché les paramètres passés dans l'URL or ici ils sont visible

Bon c'est pas grave au moins j'aurais pu en apprendre un peu plus sur javascript

En tout cas merci E.Bzz

Cordialement Lazarel