Modifier une page dynamiquement coté client

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Modifier une page dynamiquement coté client

cimourdain

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 !

Publicité

MagicBuzz

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

cimourdain

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.

MagicBuzz

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

cimourdain

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

MagicBuzz

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é

cimourdain

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';

MagicBuzz

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

Nasga

Code :

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

cimourdain

Finalement je vais employer cette méthode:

Code :

<script type="text/javascript">
function add()
{
var input = addInput.innerHTML
addInput.innerHTML = input + '<input type="text" name="name[]" /><br />\n';
// où addInput est l'id d'un div dans lequel ajouter les champs
}
</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

Publicité

Profil supprimé

Attention, le code correct est celui ci :

Code :

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

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

cimourdain

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...

cimourdain

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

Profil supprimé

Code :

<html>
<head>
<script type="text/javascript">
function hello() {
     return 
    <?php
    switch($language) {
        case 'fr' : 
            print 'Bonjour';
        break;
 
        case 'es' :
            print 'Hola';
        break;
        
         case 'en' :
         default :
             print 'Hello';
         break;
}
?>
;
}
</script>

</head>
[/code]

Message cité 1 fois

cimourdain

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é ?

gatsu35

Blablaté par Harko

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 :

var params = {
param1 : <?print 'pouet'?>,
param3 : <?print 'foo'?>
}

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 :

<script>
var monObj = <?print(json_decode(monobjetphp))?>
</script>

et voila

Message cité 1 fois

cimourdain

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

Code :

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

gatsu35

Blablaté par Harko

document.getElementById('addInput').innerHTML += '<input type="text" name="name[]" /><br />\n';

c'est un peu plus rapide hein

mais sinon en general on code ce genre de chose en pur dom

cimourdain

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 ?

Profil supprimé

gatsu35 a écrit :

Code :

var params = {
param1 : <?print 'pouet'?>,
param3 : <?print 'foo'?>
}

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 :

<script>
var monObj = <?print(json_decode(monobjetphp))?>
</script>

et voila

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

FORUM HardWare.fr

Programmation

HTML/CSS

Modifier une page dynamiquement coté client

Sujets relatifs
[Résolu] Installation d'imprimante réseau depuis une page web	page de prechargement de la totalité du site (non flash)
Interdire le rechargement (F5) d'une page/formulaire	Import Access fichier 'txt' à modifier via macro ...
Passage de parametre d'une popup vers page principale	Ecrire en début de fichier? Rafraichir une page externe?
Comment laisser une 1ere page affichée le temps qu'une 2eme s'affiche	Obligation de passer par page d'accueil
lecture d'un fichier swf (sur un serveur) dans une page PHP	[VBA] Supprimer un saut de page
Plus de sujets relatifs à : Modifier une page dynamiquement coté client

Page générée en 0.063 secondes