Remplir champ texte avec valeur checkbox

**Flushovsky** · 04/04/2011, 21h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 04/04/2011, 23h23

Bonsoir, c'est bien ce que fait ton script...non?

**Flushovsky** · 05/04/2011, 09h11

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.

**Pymento** · 05/04/2011, 11h58

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 !

**NoSmoking** · 05/04/2011, 12h17

voila une piste de travail

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Flushovsky** · 05/04/2011, 13h04

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

**Flushovsky** · 05/04/2011, 21h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Remplir champ texte avec valeur checkbox

JavaScript

Discussions similaires

Partager

Partager