Récupérer valeurs de checkbox depuis une DialogBox

**scoal** · 30/07/2009, 19h56

Bonjour,

Je me suis mis depuis peut au JS d'une part mais par la même occasion à utiliser jQuery qui est je trouve, une belle plateforme

Bref j'essaye de faire un formulaire, dans celui-ci il y a un bouton pour faire un choix sur un ou plusieurs "lieu". Ce bouton ouvre donc une DialogBox qui est composé d'un série de nom de lieu et de checkbox (liste généré en php depuis un BDD).
Jusque là c'est ok, mais je ne trouve pas comment récupérer des données depuis une ou plusieurs checkbox à la fermeture de la DialogBox...

Code Html :

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
 
<html>
<div id="dialog" title="Create new place">
	<p id="validateTips">Select places.</p>
	<?php
        include ('includes/place_liste.php');
        ?>
</div>
<div id="places-contain" class="ui-widget">
	<table id="places" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>id</th>
				<th>Intitule</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>208</td>
				<td>Vegas</td>
			</tr>
		</tbody>
	</table>
</div>
	<button id="select_place" class="ui-button ui-state-default ui-corner-all">Select a place</button>
</html>

Code PHP:

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
 
<?php
require_once ('mysql_connect.php');
$sql2 = "SELECT * FROM place ORDER BY place_int"; 
$req2 = mysql_query($sql2);
?>
<form name="myForm">
<table width="100%" border="0" cellspacing="0">
<?php
while($f = mysql_fetch_array($req2, MYSQL_NUM)) 
{
?>
  <tr>
	<td>
		<input name="" type="checkbox" value="<?php echo $f [0]; ?>"><?php echo $f [1]; ?>
	</td>
  </tr>
<?php
}
?>
</table>
</form>

Code JS (avec jQuery):

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
 
$(function() {
	var checkbox = ,//Déclarer checkbox (?)
		tips = $("#validateTips");
	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 400,
		modal: true,
		buttons: {
			//Action pour le bouton "Ok" dans la box
			'Ok': function() {
				var checked = ; //Comptage des checkbox coché(?)
				if(checked == 0){
				updateTips("Please tick at least one box.");
				}
				else(checked > 0){
					for (var i = 0; i < checked; i++) {
						$('#places tbody').append('<tr>' +
						'<td>' + id_place + '</td>' +
						'<td>' + place_intitule + '</td>' +
						'</tr>');
					}
				$(this).dialog('close');
				}
			},
			//Action pour le bouton "Cancel" dans la box
			'Cancel' : function() {
				$(this).dialog('close');
			}
		}
	});
	$('#select_place').click(function() {
		$('#dialog').dialog('open');
	})
});

Comment récupérer les id des checkbox généré depuis php, les compter et renvoyer leurs valeurs après l'envoie par le bouton "Ok"?
Sa fait pas mal de question à la fois tout sa, sur le texte ou autre d'un <input> je sais faire mais pas à partir d'une checkbox et encore moins quand il se peut qu'il y en ai plusieurs...

Si quelqu'un pourrait me guider ou éclairer ma lanterne se serait grandiose!

Merci.

Edit : J'ai trouvé un "var n = $("input:checked").length;" pour compter les checkbox cochées... Je vais bien finir par trouver ce que je cherche à force de grater

**scoal** · 31/07/2009, 00h44

J'avance petit à petit...

Mon code JS à l'heure où j'écris :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
$(function() {
 
	var  com = $("#comment");
 
	function checkChecked() {
		var n = $("input:checked").length;
		if (n <= 0) {
			com.addClass('ui-state-error');
			com.text("Please tick at least one box.");
			return false;
		} else {
			return true;
		}
	}
 
	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 400,
		modal: true,
		buttons: {
			//Action pour le bouton "Ok" dans la box
			'Ok': function() {
				var bValid = true;
				com.removeClass('ui-state-error');
				com.text('Select places.');
				if(checkChecked()){
					var n = $("input:checked").length;
					for (var i = 0; i < n; i++) {
						$('#places tbody').append('<tr><td></td><td></td></tr>');
					}
				$(this).dialog('close');
				}
			},
			//Action pour le bouton "Cancel" dans la box
			'Cancel' : function() {
				$(this).dialog('close');
			}
		}
	});
	$('#select_place').click(function() {
		$('#dialog').dialog('open');
	})
	.hover(
		function(){ 
			$(this).addClass("ui-state-hover"); 
		},
		function(){ 
			$(this).removeClass("ui-state-hover"); 
		}
	)
	.mousedown(function(){
		$(this).addClass("ui-state-active"); 
		}
	)
	.mouseup(function(){
			$(this).removeClass("ui-state-active");
		}
	);
});

Quand je clique sur "ok" sans aucune checkbox de coché, j'ai bien la "class" et le "texte" qui s'appliquent au "div comment". Et quand une ou plusieurs checkbox sont selectionné j'ai bien le même nombre de ligne qui se crées dans mon tableau.

Par contre je trouve toujours pas le moyen de faire le lien entre ce qui est généré en php et l'affichage de ceux coché dans mon tableau

Je comprend qu'il faut jouer avec les id et les values généré en php mais j'arrive pas à voir comment pour le moment...

Si quelqu'un aurait une idée

Récupérer valeurs de checkbox depuis une DialogBox

jQuery

Discussions similaires

Partager

Partager