Modifier une page dynamiquement coté client

Modifier une page dynamiquement coté client - HTML/CSS - Programmation

Marsh Posté le 11-09-2008 à 16:36:51    

Bonjour à tous,
 
Dans un formulaire html j'ai une liste de personnes a cocher. On peut cocher 1 où n personnes parmi les choix (ce sont des checkbox).
J'aimerais qu'à chaque fois qu'une personne est cochée un composant html de mon choix soit écrit dans le formulaire, par exemple un nouveau champ texte correspondant à la personne pour rentrer des informations sur cette personne. Informations qui devront évidemment être soumises avec le reste du formulaire le moment venu.
 
Je pensais faire ça avec un script JavaScript qui serait invoqué à chaque fois qu'une checkbox est cochée ou décochée, mais je sais pas trop comment m'y prendre...
 
Si vous pensez que mon problème peut se traiter avec autre chose que des chekboxes ça me gêne pas de faire autre chose du moment que l'idée est respectée.
 
Voilà, si vous avez des idées !

Reply

Marsh Posté le 11-09-2008 à 16:36:51   

Reply

Marsh Posté le 11-09-2008 à 16:46:25    

le plus simple, c'est de créer tous les champs et les coller dans des div avec un style "display: none;"
 
ensuite, t'as juste à changer le display lorsque tu coche ou décoche une checkbox. tu leur donne par exemple à tes checkbox un id="PersonneXXX", et tes div un id="DivXXX" avec XXX égaux pour le div se rapportant à une checkbox. ainsi il sera très aisé en JS de récupérer le XXX en question et effectuer la bonne oppération.
 
et côté serveur, tu ne traîte que les input correspondant à un "PersonneXXX" reçu en paramètre (les checkbox non cochées ne sont pas transmises au moment du post du formulaire)


Message édité par MagicBuzz le 11-09-2008 à 16:47:33
Reply

Marsh Posté le 11-09-2008 à 16:49:14    

oui effectivement j'y avais pensé mais je trouvais pas ça très propre.
 
J'avais aussi pensé construire les input avec une fonction javascript qui fait des document.write() mais curieusement ce qui est écrit l'est sur une nouvelle page vierge et non dans ma page à l'endroit où je veux.

Reply

Marsh Posté le 11-09-2008 à 16:53:53    

surtout, c'est bien plus goret d'après moi.
 
éventuellement, si tu veux modifier ton flux HTML, passes par DOM, mais c'est vraiment se compliquer la vie pour rien


Message édité par MagicBuzz le 11-09-2008 à 16:54:10
Reply

Marsh Posté le 11-09-2008 à 16:59:45    

ok éventuellement si je trouve rien d'autre je ferrais ta méthode. Mais si quelqu'un à d'autres idées je suis preneur.

Reply

Marsh Posté le 11-09-2008 à 17:03:20    

déjà, indique avec quel langage serveur tu travailles.
 
même si c'est pas franchement côté client, .NET a par exemple de très bonnes solutions alternatives pour faire ce que tu veux en toute simplicité

Reply

Marsh Posté le 11-09-2008 à 17:22:10    

Je fais du php.
Pour ta méthode comment tu fais pour que les DIV soient initialement invisibles ? La fonction javascript qui permet de les afficher ou de les cacher suivant l'état coché ou non de la box est:
document.getElementById(id_div).style.display = condition ? 'block' : 'none';

Reply

Marsh Posté le 11-09-2008 à 18:52:39    

ben soit tu leur affecte une class CSS qui contient "display: none;" soit tu leurs met un attribut style="display: none;" :spamafote:

Reply

Marsh Posté le 11-09-2008 à 20:34:57    

Code :
  1. jQuery("#id_div" ).hide();


 
Attention jQuery est une vrai drogue, leur slogan étant : "write less drink more !", attention a votre foie !
 
Sinon je ne sais même plus changer un attribut css en javascript pur, mais ça se fait :)

Reply

Marsh Posté le 13-09-2008 à 12:17:47    

Finalement je vais employer cette méthode:

Code :
  1. <script type="text/javascript">
  3. function add()
  4. {
  5.     var input = addInput.innerHTML
  6.     addInput.innerHTML = input + '<input type="text" name="name[]" /><br />\n';
  8.    // où addInput est l'id d'un div dans lequel ajouter les champs
  9. }
  11. </script>


 
Comme expliqué dans ce sujet: http://forum.hardware.fr/hfr/Progr [...] 7875_1.htm qui posait exactement la même question que moi... mais qui n'a pas eu les mêmes réponses !


Message édité par cimourdain le 13-09-2008 à 12:20:31
Reply

Marsh Posté le 13-09-2008 à 12:17:47   

Reply

Marsh Posté le 13-09-2008 à 14:49:51    

Attention, le code correct est celui ci :

Code :
  1. function add()
  2. {
  3.     var input = document.getElementById('addInput').innerHTML
  4.     document.getElementById('addInput').innerHTML = input + '<input type="text" name="name[]" /><br />\n';
  5.  
  6.    // où addInput est l'id d'un div dans lequel ajouter les champs
  7. }


Message édité par Profil supprimé le 13-09-2008 à 14:56:44
Reply

Marsh Posté le 13-09-2008 à 17:22:16    

exact la console de firefox indiquait effectivement que pour respecter je sais plus quelle norme il faut faire un getElementById() plutôt que d'avoir l'id en dur...

Reply

Marsh Posté le 17-09-2008 à 15:14:31    

Savez vous comment je peut inclure du code php dans du javascript, pour que l'inclusion de code HTML soit "dynamique" ?


Message édité par cimourdain le 17-09-2008 à 16:09:52
Reply

Marsh Posté le 17-09-2008 à 18:25:25    

Code :
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function hello() {
  5.      return 
  6.     <?php
  7.     switch($language) {
  8.         case 'fr' : 
  9.             print 'Bonjour';
  10.         break;
  11.  
  12.         case 'es' :
  13.             print 'Hola';
  14.         break;
  15.         
  16.          case 'en' :
  17.          default :
  18.              print 'Hello';
  19.          break;
  20. }
  21. ?>
  22. ;
  23. }
  24. </script>


</head>
[/code]

Message cité 1 fois
Reply

Marsh Posté le 18-09-2008 à 08:53:50    

ouais mais le problème c'est que j'écris pas les scripts directement dans les pages mais je fais une inclusion d'un fichier .js.
 
 
Autre question, est-il possible d'écrire un code qui rende possible le retour en arrière dans ce que tu a écrit plus haut. Admettons qu'on ajoute 3 inputs en cliquant sur un lien, est il possible de faire un lien qui appellera une fonction javascript qui pourra supprimer le dernier input ajouté ?

Reply

Marsh Posté le 18-09-2008 à 11:15:48    


 
 
Générer du javascript via du PHP c'est juste la chose la plus laide qui puisse exister.  
La seule chose à laquelle tu pourrais avoir le droit, c'est de générer un joli objet contenant tous les paramètres que bibi il a besoin pour faire tourner son JS :  
 

Code :
  1. var params = {
  2.     param1 : <?print 'pouet'?>,
  3.     param3 : <?print 'foo'?>
  4. }


 
Mais là ça reste encore super moche.
LA solution la plus sexy serait d'avoir un obj PHP rempli des valeurs que tu veux retrouver en JS
et après tu fais un simple :  
 

Code :
  1. <script>
  2. var monObj = <?print(json_decode(monobjetphp))?>
  3. </script>


 
et voila  
 

Message cité 1 fois
Reply

Marsh Posté le 18-09-2008 à 14:28:08    

Ok et sinon pour la possibilité de revenir en arrière dans l'ajout des champs input avec ce code:

Code :
  1. function add()
  3.       {
  5.          var input = document.getElementById('addInput').innerHTML
  7.          document.getElementById('addInput').innerHTML = input + '<input type="text" name="name[]" /><br />\n';
  9.      
  11.         // où addInput est l'id d'un div dans lequel ajouter les champs
  13.       }


 
?

Reply

Marsh Posté le 18-09-2008 à 14:54:23    

document.getElementById('addInput').innerHTML += '<input type="text" name="name[]" /><br />\n';
 
c'est un peu plus rapide hein :D
 
mais sinon en general on code ce genre de chose en pur dom

Reply

Marsh Posté le 18-09-2008 à 16:18:41    

Qu'est ce que tu entends pas "un peu rapide" ? Ca veut dire quoi coder en pur DOM ?
 
Sinon t'as pas une idée pour supprimer des rajouts faits de cette façon ?

Reply

Marsh Posté le 18-09-2008 à 18:41:10    

gatsu35 a écrit :


 
 
Générer du javascript via du PHP c'est juste la chose la plus laide qui puisse exister.  
La seule chose à laquelle tu pourrais avoir le droit, c'est de générer un joli objet contenant tous les paramètres que bibi il a besoin pour faire tourner son JS :  
 

Code :
  1. var params = {
  2.     param1 : <?print 'pouet'?>,
  3.     param3 : <?print 'foo'?>
  4. }


 
Mais là ça reste encore super moche.
LA solution la plus sexy serait d'avoir un obj PHP rempli des valeurs que tu veux retrouver en JS
et après tu fais un simple :  
 

Code :
  1. <script>
  2. var monObj = <?print(json_decode(monobjetphp))?>
  3. </script>


 
et voila  
 


 
bah je ne l'ai jamais fait je répond juste à sa question  :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed