Action avec bouton radio.

Version imprimable

24/08/2007, 19h36
Shandler

Action avec bouton radio.

Bonjour a tous.

J'ai un problème et que je pense qu'il ne peut être résolu qu'en javascript mais si y a un autre moyen merci de me le dire.

Donc voila :

J'ai créé un formulaire avec différent champ de type textarea et text.
Dans ce formulaire y a une section ou il y a 3 bouton radio qui ont chacun une valeur (6 mois, 8 mois, 24 mois) quand on sélectionne une des 3 valeurs un tableau doit apparaitre juste en dessous avec comme nombre de colonne le nombre de mois.
Donc ce que je voudrais savoir comment faire apparaitre ce tableau sachant que la personne qui rempli le formulaire doit garder les informations déjà saisi donc éviter de rafraichir la page pour perdre les informations déjà saisi.

Si quelqu'un a une idée, une aide je l'en remercie.
24/08/2007, 19h51
Madfrix

:salut:

pourquoi ne codes tu pas directement tes 3 tableaux dans 3 divs différents dans ta page en visibility hidden et lorsque l'utilisateur clique sur tes boutons radio, les div se mettent en visibility visible et donc tes tableaux apparaissent.
24/08/2007, 21h12
Shandler

Ca peut etre une technique mais bon le seul probleme c'est que ca va alourdir ma page considérablement donc si une autre technique existe ca pourrai etre mieux je pense merci.

Peut etre en combinant avec une boucle en php mais bon je voie pas comment récupérer la valeur pour la boucle.

Merci
25/08/2007, 18h40
Shandler

Je bute toujours personne n'aurait une idée miracle ?

Merci.
25/08/2007, 20h28
ryan

Yop!

Pourquoi ne pas prévoir uniquement le tableau (<table>) vide, ce qui n'alourdira pas vraiment la page, et lui ajouter le nombre de colonnes voulu en fonction du bouton radio qui aura été coché?
25/08/2007, 20h46
Shandler

oui jy es pensé en utilisant une boucle for mais voila je ne sais pas comment envoyer la valeur dans ma boucle et surtout comment garder les valeurs deja saisi dans mon formulaire.

MErci

Yop!

Quelque chose comme ça:

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
 
<html>
<head>
<script type="text/javaScript">
function addCol(combien)
{
  var tobj;
  tobj = document.getElementById("matable");
  tobj.deleteRow(-1);
  var tr = tobj.insertRow(-1);
  for (i=0; i<combien; i++)
  {
    var td = tr.insertCell(i);
    td.innerHTML = "colonne " + (i+1);
  }  
}
</script>
</head>
<body>
<form>
Un champ:<input type=text id="c1" value="">
<br/>
Un autre champ:<input type=text id="c2" value="">
<br/>
<input type=radio name="mois" value=6 onMouseUp="addCol('6')">6
<br/>
<input type=radio name="mois" value=8 onMouseUp="addCol('8')">8
<br/>
<input type=radio name="mois" value=24 onMouseUp="addCol('24')">24
</select>
</form>
<table id="matable" border=1>
</table>
</body>
</html>

Tu peux compléter les deux champs textes et ensuite sélectionner un nombre de mois sans que cela n'influe sur le contenu des champs textes.

Salut merci de ton aide.

J'ai essayé de pigé ton code mais comme moi et le javascript ca fais 2 j'ai pas tous compris car en faite j'ai essayé de modifier l'affichage du tableau sachant que je voudrais qu'il ressemble plus a ca
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <table border=1> <tr> <td>moi1</td> <td> <textarea name="moi1" ></textarea> </td> </tr> <tr> <td>moi2</td> <td> <textarea name="moi2" ></textarea> </td> </tr> <tr> <td>moi3</td> <td> <textarea name="moi3" ></textarea> </td> </tr> </table>
Comme tu peux le voir en plus y a des textarea donc le contenu doit enregistrer en BDD après enfin voilà si tu pouvais une dernière fois éclairer ma lanterne j'en t'en remercie.

Merci a toi.

Yop!

Ceci devrait convenir:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function addCol(combien)
{
  var tobj = document.getElementById("matable");
 
  numrows = tobj.rows.length;
  for (i=0; i<numrows; i++)
  {
    tobj.deleteRow(-1); 
  }
 
  for (i=1; i<=combien; i++)
  {
    var tr = tobj.insertRow(-1);  
    var td0 = tr.insertCell(-1);
    td0.innerHTML = "moi" + i;
    var td1 = tr.insertCell(-1);
    td1.innerHTML = "<textarea name='moi" + i + "' ></textarea>"; 
  }  
}

26/08/2007, 12h10
Shandler

Merci ca marche nickel mais j'aurais une question subsidiaire si tu es toujours dispo.

Voila sur mon formulaire je vais des verification en php pour savoir si tous les champs sont bien rempli ou si c'est bien une adresse mail donc ma question est comment faire pour que quand une erreur arrive je garde toujours l'affichage du tableau qui est rempli sachant que je fais deja un test en php pour replacer le bouton sélectionner en checked.

J'aurais aimé aussi pouvoir insérer la valeur des mois sélectionné dans un champ caché pour le traitement avec la BDD.

Merci beaucoup de ton aide.
26/08/2007, 12h17
ryan
Yop!

Je crois que le meilleur moyen de revenir en arrière dans ce cas est un history.go(-1), ce qui devrait préserver les éléments dynamiques et leur contenu.
Code:

1 2 <a href="javascript:history.go(-1)">Back</a>
26/08/2007, 16h09
Shandler

Salut,

J'ai essayé de mettre en place autrement ton history.go(-1) car le probléme faut que se soit transparent pour l'utilisateur donc quand il valide avec le bouton submit, les erreurs apparaisse et donc le tableau doit rester. Car de lui même il cliquera pas sur le lien back.

Merci a toi.
26/08/2007, 20h34
ryan

Yop!

J'avais compris que tu faisais une validation en PHP, donc après que le formulaire ait été soumis.

Cela dit, il est possible de faire la validation en Javascript avant de soumettre le formulaire, ce sera plus simple que de reconstruire celui-ci sur la page d'action au cas il y a des champs vides.
26/08/2007, 20h58
Shandler

En faite tous ce qui est validation des champs vide est deja mis en place y a juste le module du tableau qui reste a mettre en place donc c'est pour ca si il y avais juste un moyen pour réaficher le tableau et de garder les valeurs du tableau si il y en a.

Merci a toi.
26/08/2007, 21h38
ryan

Yop!

'Scuse moi, mais je n'ai toujours pas capté si tu validais les champs en Javascript avant de soumettre le formulaire, ou si tu validais les champs en PHP après avoir soumis le formulaire.

C'est dimanche, mon neurone se la joue cool....
26/08/2007, 21h49
Shandler

Tous ce qui est validation j'ai deja mis ca en place en php en verifiant si la variable $_POST est pas vide par exemple et donc j'aimerais continué sur ma lancé pour les textarea du tableau des mois en les verifiant aussi grace au php mais comme je disais plus haut mon probléme est que quand une erreur est affiché le tableau n'est plus la.

Merci a toi.
26/08/2007, 22h38
ryan

Yop!

Malheureusement, je ne code plus en PHP depuis des années (je suis tombé du côté obscur de la force).

Mais bon, le principe est le même que ce soit en ASP ou en PHP:
- tu connais le nombre de mois puisque les boutons radio envoient l'information.
- tu sais que le nom de tous les textarea commence par "moi"
- tu construis une boucle, mettons que le controleur de la boucle soit i et que sa valeur maximale soit le nombre de mois.
- tu reconstruis le nom de chaque textarea en concaténant "moi" et i, quelque chose comme $_POST['moi' + i] (attention, mon PHP est bien rouillé, je ne me souviens plus si ceci est autorisé en PHP).
- cela devrait te permettre de récupérer tous les textarea et de reconstruire le tableau.
26/08/2007, 23h06
Shandler

Oui je suis d'accord mais mon problème est que j'arrive pas récupérer la valeur du radio pour le mettre dans ma boucle car je pense pas que mettre du php dans une fonction javascript marche bien donc en faite il me faudrait je sais pas quoi pour que je puisse mettre la variable javascript avec la valeur du radio dans ma boucle php. Et aussi peut on mettre un css particulier sur les td avec ta methode de creation de tableau en js ?

Voila merci encore de ton aide.
26/08/2007, 23h23
ryan
Yop!

Mettons que tes radios se nomment "nb_mois" (tous les radios doivent avoir le même nom).
Dans la page d'action du formulaire (la page vers laquelle tu envoies le formulaire) tu devrais pouvoir récupérer le nombre de mois avec
Code:

1 2 $_POST['nb_mois']
27/08/2007, 10h20
Shandler

Salut,

Moi aussi hier soir mes neurones marché pas top car la solution été trés con donc maitenant ca marche meme quand y a des erreurs c'est top.

Sinon je t'avais demandé si on pouvait mettre du css dans ton code javascript.

Merci beaucoup de ton aide.
27/08/2007, 10h43
ryan
Yop!

Oui, tu peux affecter une classe au TD lors de sa création.
Pour IE:
Code:

1 2 td_objet.setAttribute("className","le_nom_de_ta_classe");
Pour les autres:
Code:

1 2 td_objet.setAttribute("class","le_nom_de_ta_classe");

Salut merci ca marche pour les classes.

J'ai essyé de mettre en place ton systéme pour un truc un peut différent sachant que la quand j'appuie sur un lien on incrémente les ligne donc plus on clique plus y a de ligne, sauf que toute mes tentatives de mise ne place tombe a l'eau car deja l'increment marche pas du tous et en plus quand j'apuie sur le lien + il retourne toujours en haut de page c'est un peut embétant.
Si tu pouvais juste m'éguiller.
Code:

1 2 3 4 5 6 7 8 9 10 11 <table> <tr> <td> <ul> <li><input type="text" name="synthese_mission" id="synthese_mission" /></li><a href="#" onMouseUp="addColResum()" >+</a> </ul> </td> </tr> </table> <table id="resume_calend"> </table>
Merci a toi.

Yop!

Pour le lien, essaie plutôt ceci:
Code:

1 2 <a href="javascript:addColResum()" >+</a>
Pour l'incrément: en donnant -1 comme paramètre des méthodes insertRow et insertCell, elles vont ajouter la ligne ou la cellule après ce qui existe déjà, donc de ce côté, il n'y a pas de changement à apporter à la fonction.
Il faut juste prévoir un champ caché pour passer le nombre de mois à la page d'action du formulaire si tu veux y reconstruire le tableau (encore qu'il soit possible de faire sans, mais c'est plus compliqué).
Donc, dans ton formulaire, tu ajoutes:
Code:

1 2 <input type=hidden name="mois">
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function addColResum() { var tobj = document.getElementById("matable"); var tr = tobj.insertRow(-1); var td0 = tr.insertCell(-1); td0.innerHTML = "moi" + i; var td1 = tr.insertCell(-1); td1.innerHTML = "<textarea name='moi" + i + "' ></textarea>"; document.forms[0].mois.value = tobj.rows.length; }
Et ça devrait fonctionner...pour autant que le formualire soit le premier ou le seul de ta page.

Re!

Haa, j'y suis allé trop vite. Il faut gérer le nombre de mois pour pouvoir donner un nom au textarea, donc:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function addColResum()
{
  var tobj = document.getElementById("matable");
 
  i = tobj.rows.length + 1;
 
  var tr = tobj.insertRow(-1);  
  var td0 = tr.insertCell(-1);
  td0.innerHTML = "moi" + i;
  var td1 = tr.insertCell(-1);
  td1.innerHTML = "<textarea name='moi" + i + "' ></textarea>"; 
 
  document.forms[0].mois.value = i;
 }

je dois me tromper quelque part car ca ne me marche pas.

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
<html>
<head>
<script type="text/javaScript">	  
  function addColResum()
  {
    var tobj = document.getElementById("resume_calend");
 
    i = tobj.rows.length + 1;
 
    var tr = tobj.insertRow(-1);  
    var td1 = tr.insertCell(-1);
    td1.innerHTML = "<ul><li><input type='text' name='synthese_mission'"+ i + "id='synthese_mission' /></li></ul>"; 
 
    document.forms[0].mois.value = i;
  } 
}  
</script>	
</head>
<body>
     <label for="resumer">R&eacute;sum&eacute; des missions (soyez pr&eacute;cis et concis, ces point seront repris pour &eacute;tablir le contrat et la convention)</label>
     <table>
       <tr>
         <td>
           <ul>
              <li><input type="text" name="synthese_mission" id="synthese_mission"  /></li><a href="javascript:addColResum()">+</a>
           </ul>
         </td>
       </tr>
     </table>
     <table id="resume_calend">
     </table>
     <input type=hidden name="mois">  
</body>
</html>

Merci a toi.

Yop!

Il y avait en effet 2 choses qui clochaient:
- un parenthèse de trop dans le Javascript
- il n'y avait pas de balise FORM dans la page, donc la ligne

Code:

1
2
 
  document.forms[0].mois.value = i;

donnait une erreur.

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
 
<html>
<head>
<script type="text/javaScript">	  
  function addColResum()
  {
    var tobj = document.getElementById("resume_calend");
 
    i = tobj.rows.length + 1;
 
    var tr = tobj.insertRow(-1);  
    var td1 = tr.insertCell(-1);
    td1.innerHTML = "<ul><li><input type='text' name='synthese_mission'"+ i + "id='synthese_mission' /></li></ul>"; 
 
    document.forms[0].mois.value = i;
  } 
 
</script>	
</head>
<body>
  <form>
     <label for="resumer">R&eacute;sum&eacute; des missions (soyez pr&eacute;cis et concis, ces point seront repris pour &eacute;tablir le contrat et la convention)</label>
     <table>
       <tr>
         <td>
           <ul>
              <li><input type="text" name="synthese_mission" id="synthese_mission"  /></li><a href="javascript:addColResum()">+</a>
           </ul>
         </td>
       </tr>
     </table>
     <table id="resume_calend">
     </table>
     <input type=hidden name="mois">  
   </form>
</body>
</html>

27/08/2007, 16h56
Shandler

Ca marche nickel merci a toi.

Aussi pour le champ caché qu'on a mis, pour lui spécifier le nombre de ligne créé on réucpére comment cette valeur ?

Merci encore a toi.
27/08/2007, 17h17
ryan

Yop!

Je présume que quand tu parles de récupérer la valeur du champ caché, c'est le récupérer dans la page d'action du formulaire, donc en PHP?

Ce devrait être $_POST['mois']
27/08/2007, 17h58
Shandler

non, je voulais dire que pour un champ hidden on doit y insérer une value pour qu'il me retourne une valeur $_POST

Code:

<input type=hidden name="mois" value="Comment_on_met_le_nbre_de_ligne_ici">

merci
27/08/2007, 18h22
ryan
Yop!

c'est la ligne suivante:
Code:

1 2 document.forms[0].mois.value = i;
qui insère le nombre de ligne dans le champ hidden.
27/08/2007, 19h23
Shandler
Quand je fais ca :
Code:

1 2 3 4 <?php echo $_POST['mois']; ?>
Dans quand je valide mon formulaire, la variable $_POST est vide alors que dans l'url plein de chose s'affiche dont le nombre de champ mis.

Donc ca serait plus une méthode get mais alors le champ hidden ne servirais a rien ?
27/08/2007, 20h10
ryan
Yop!

Cela dépend de la methode utilisée pour envoyer le formulaire.
Soit GET, et dans ce cas les données sont envoyées dans l'URL (après le ?) et sont accessible dans la collection $_GET (je présume car je ne pratique plus PHP depuis quleques années), soit POST, et dans ce cas, le données sont accessibles dans la collection $_POST.

En résumé, la ligne qui définit ton formulaire dans la première page devrait ressembler à cela:
Code:

1 2 <form action="ta_seconde_page.php" method=post>
27/08/2007, 21h09
Shandler

a ok je pensé pas qu'il prenait en compte la méthode utilisé par le form, il est fort ce javascript :D.

Bon bas voila je pense que j'en es fini merci beaucoup pour ton aide, a une prochaine fois bye et merci.

Fuseau horaire GMT +2. Il est actuellement 05h57.