Javascript/Html/DOM Formulaire dynamique - Besoin d'un peu d'aide

Salut l’équipe

N’y connaissant pas grand chose en javascript je viens vous voir.
Alors voilà j’ai un formulaire […]

Lorsque l’on clique sur une image, une bordure se crée autour d’elle (ca c’est fait) et le nom de l’image s’inscrit dans un champ (ca c’est le problème)…

Une foie cliqué sur l’image un javascript est appelé et le nom de l’image est stocké dans un champ nommé distrib[0].

Si se champ est déjà rempli le script doit créer un second champ nommé distrib[1] et stocké le nom de l’image dedans.

Je résume :
clique sur une image
-> création d’une bordure autour (ca c ok)
-> appelle d’un script
…-> si distrib[0] est vide on stocke le nom de l’image dedans
…-> sinon, le script crée un champ nommé distrib[1] et sctokée le nom de l’image dedans

si quelqu’un peut m’aider ca serai vraiment sympa
merci
Edité le 13/03/2010 à 23:12

Quelles sont tes compétences en javascript?

La solution la plus simple, à mon goût, c’est de mettre tes deux champs, mais avec CSS de faire “disparaître” le distrib[1] (via : display: none;) et de le faire réapparaître si besoin, en le modifiant selon tes besoins.

Sinon, DOM :slight_smile:

Je sait faire des vérifications de formulaire, des retours automatique après un certains temps, un tout petit peu DOM.

oui, la solution de Sans_nom, sauf qu’il faut prévoir un champ par image (on peut potentiellement toutes les cliquer), comme tu connait ton nombre d’image, tu peut générer autant de champ quil faut en PHP.

Sinon, ce serait peut-être mieux de faire un textArea contenant tous les noms d’image séparés par des retours chariots, et tu resplitte en PHP après le submit.

Ou encore, tu pourrait aussi faire une case à cocher en face de chaque image, ça correspondrait plus à une ergonomie standard.
deltree

excellente idée la case à cocher masi pas très optimisé si j’ai 50 images donc 50 coase à cocher et si une seule est coché

enfin bref je vais mettre en place cela

Une question me vient
lorsque je clique sur une image, une bordure se crée autour et ca coche la case :
onClick=“document.vote.Ubuntu.value.checked = true; (je suis pas sur de cette ligne)
document.getElementById(‘Ubuntu’).style.borderWidth = ‘1px’;”

comment faire (si c’est possible lorsque je reclique sur la meme image, que la bordure s’efface et que la case se décoche, sa existe onSecondClick ?

Non, il n’y a pas de onSecondClick, c’est toujours onClick, et c’est à toi de détecter le deuxième click, en répérant la valeur checked de ton champs :slight_smile:

c’est champ.checked directement sans value apparemment:
http://www.w3schools.com/htmldom/dom_obj_checkbox.asp

Je te conseille de faire un fonction que tu appelle sur onclick pour rendre tout ça plus simple, par exemple:
onclick=“maFonction(document.vote.Ubuntu, ‘Ubuntu’)”

et
maFonction(checkbox, id){
if (checkbox.checked){…

Je vien de tenter cela, ca fonctionne pas :

function distrib(distribution) {

if (document.vote.distribution.checked == true) {
document.vote.distribution.checked = false; document.getElementById('distribution').style.borderWidth = '0px'; }

else { document.vote.distribution.checked = true; document.getElementById('distribution').style.borderWidth = '1px'; }

}

je pense que ca vient du paramètre distribution que j’envoie à la fonction le problème

non, tu ne te sert pas de ta variable distribution. quand tu met document.vote.distribution, tu utilise toujours le même champ.
idem dans getElementById, si tu met les quote, ça veut dire que tu prend toujours l’élément ‘distribution’, et pas l’élément dont tu donne le nom en paramètre.

en supposant tu passe en paramètre le nom du champ de type string, il faut le récupérer dans l’objet form (ie. document.vote)


function distrib(distribution) {

if (document.vote.elements[distribution].checked == true) {
document.vote.elements[distribution].checked = false; document.getElementById(distribution).style.borderWidth = '0px'; }

else { document.vote.elements[distribution].checked = true; document.getElementById(distribution).style.borderWidth = '1px'; }

}
// do a test:
distrib('Ubuntu');



onclick ne détecte qu’un seul clic dans la pratique, mais dans l’idée ça peut être plus (j’ai pas la doc html là, donc je suis pas sûr)

ondblclick existe pour le double clic, mais je sais pas trop si c’est standard, enfin onmousedown, onmouseup te permettent te catcher ça aussi.

un doubleclic c’est deux clics sur le même composant en un certain temps.

Pour appeler ma fonction distrib, je peu utiliser ca :
onClick="distrib(Edubuntu)"

???

Nan, il faut passer une valeur à ta fonction, alors qu’avec cette syntaxe, tu passe en paramètre la valeur d’un variable Edubuntu qui n’existe sûrement pas, à mon avis tu doit vouloir faire

distrib('Edubuntu')

.
Essaie ça, et si ça ne marche pas, envoie une exemple de code html+js avec juste 2 images, pour avoir un cas de test.
Tu peux aussi utiliser les outils de Mozilla pour débugger le Javascript, même sans ça, regarde les erreurs que tu as dans la console Javascript. (outils/console javascript dans ff)
:slight_smile:

Sans_Nom> il veut avoir une action différente en cliquant sur son image la premère et la 2ème fois, c’est juste un toggle, il ne cherche pas à gérer le double click;)

merci deltree
tu es trop bon

merci encore

Je t’en prie :wink:

d
Edité le 25/11/2009 à 21:14