Remplir champ texte avec valeur checkbox

Version imprimable

Bonsoir à tous,

Ci-dessous le code sur ma première réflexion sur le remplissage de champ avec les valeurs "value" et "title" de la checkbox cochée.

Mon but est de faire en sorte de pouvoir rajouter des checkbox avec des valeurs "value" et "title" différent et de concaténer les valeurs "value" dans le champs "retURL" et les valeurs "title" dans le champ "docNames". Chaque valeurs étant séparées par une virgule. (par exemple "1,2,3" pour le champ "retURL" et "doc_a,doc_b,doc_c" pour le champ "docNames")

Petite particularité, j'aimerais que dans le champ "retURL", les valeurs récupérées et concaténées apparaissent à la fin de l'url comme valeur de la variable "var". Par exemple : http://www.site.com/page.php?var=1,2,3

Je suis conscient que mon code n'est pas très abouti et loin d'arriver à ce que je veux mais je débute en javascript.

Merci de votre aide.
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 <html> <head> <title> Untitled </title> <script type="text/javascript"> function test(){ if(document.getElementById('ckb1').checked==true){ document.getElementById('retURL').value = 'http://www.site.com/page.php?var='+ document.getElementById('ckb1').value; document.getElementById('docNames').value = document.getElementById('ckb1').title; } else{ document.getElementById('retURL').value=''; document.getElementById('docNames').value=''; } } </script> </head> <body> Doc A <input type='checkbox' id='ckb1' value='1' title="doc_a" onclick="test()" /><br> <input type='text' name='retURL' style="width:300px" id='retURL'/><br> <input type='text' name='docNames' style="width:300px" id='docNames'/> </div> </body> </html>

04/04/2011, 22h23
NoSmoking

Bonsoir, c'est bien ce que fait ton script...non?
05/04/2011, 08h11
Flushovsky

Oui, mais cela ne fonctionne que pour une checkbox. Mon but est d'en avoir plusieurs dont les valeurs 'value' et 'title' viendraient se concaténer dans les champs texte.
05/04/2011, 10h58
Pymento

J'ai pas tout bien compris, mais déjà pour plusieurs checkbox, tu vas devoir faire un getElementsByClass (en ayant affecté une classe à tes checkbox bien entendu) puis un foreach sur ton résultat et après c'est la ou j'ai pas bien pigé... mais concrètement tu peux concaténer tout ce que tu veux après !

voila une piste de travail

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
<!DOCTYPE html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function test( obj){
  // recup des info
  var sTitre = obj.title;
  var sValue = obj.value;
  var oURL   = document.getElementById('retURL');
  var oNames = document.getElementById('docNames');
 
  if( obj.checked == true){
    // si vide
    if( oURL.value == ""){
      oURL.value = 'http://www.site.com/page.php?var=';
    }
    else{
      oURL.value   += ',';
      oNames.value += ',';
    }
    oURL.value   += sValue;
    oNames.value += sTitre;
  }
  else{
    oURL.value   ='';
    oNames.value ='';
  }
}</script>
</head>
<body>
  Doc A <input type='checkbox' id='ckb1' value='1' title="doc_a" onclick="test(this)">
  Doc B <input type='checkbox' id='ckb2' value='2' title="doc_b" onclick="test(this)">
  <br><input type='text' name='retURL' style="width:300px" id='retURL'>
  <br><input type='text' name='docNames' style="width:300px" id='docNames'>
</body>
</html>

il te restes à voir le cas ou plusieurs étant cochés on en décoche un, dans ce cas faire une boucle pour tester tous les CHECKBOX et faire suivant le cas.

05/04/2011, 12h04
Flushovsky

Quelle piste de travail ! Merci nosmoking, c'est bien ce que je voulais faire.
Comme tu le dis, il faut que je trouve maintenant comment gérer le décochage d'une checkbox.
J'essaye de voir ça déjà.

Bon, finalement, j'ai pu avancer et faire ce que je voulais en utilisant des tableaux.
Voici ce que j'ai fait et qui fonctionne. Qu'en pensez vous ?

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
 
<!DOCTYPE html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function test(checkObj){
 
		var oURL   = document.getElementById('retURL');
		var oNames = document.getElementById('docNames');	
 
        var checkGroup = checkObj.form[checkObj.name];
        var checkGroupLen = checkGroup.length;
        var valueList = new Array();
		var titleList = new Array();
        for (var i=0; i<checkGroupLen; i++){
           if(checkGroup[i].checked){
              valueList[valueList.length] = checkGroup[i].value;
			  titleList[titleList.length] = checkGroup[i].title;
           }
        }
        oURL.value = 'http://www.site.com/page.php?var='+valueList.join(',');
		oNames.value = titleList.join(',');
        return;
     }
 
</script>
</head>
<body>
<form name="myform">
  Doc A <input type='checkbox' name="ckb[]" value='1' title="doc_a" onclick="test(this)">
  Doc B <input type='checkbox' name="ckb[]" value='2' title="doc_b" onclick="test(this)">
  Doc C <input type='checkbox' name="ckb[]" value='3' title="doc_c" onclick="test(this)">
  <br><input type='text' name='retURL' style="width:300px" id='retURL'>
  <br><input type='text' name='docNames' style="width:300px" id='docNames'>
  </form>
</body>
</html>