Remplir champ texte avec valeur checkbox

Flushovsky · 04/04/2011, 20h29

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, 22h23

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

Flushovsky · 05/04/2011, 08h11

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, 10h58

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, 11h17

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, 12h04

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, 20h20

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>

05/04/2011, 10h58	#4
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	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 ! __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

04/04/2011, 22h23	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 933 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 933 Points : 4 756 Points : 4 756	Bonsoir, c'est bien ce que fait ton script...non?
	00

05/04/2011, 08h11	#3
Flushovsky Nouveau Membre du Club Inscription : février 2005 Messages : 125 Détails du profil Informations forums : Inscription : février 2005 Messages : 125 Points : 35 Points : 35	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.
	00

05/04/2011, 12h04	#6
Flushovsky Nouveau Membre du Club Inscription : février 2005 Messages : 125 Détails du profil Informations forums : Inscription : février 2005 Messages : 125 Points : 35 Points : 35	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à.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email