Multiple Selectbox aantal Geselecteerd
Is het mogelijk om bij een multi-selectbox het aantal wat geselecteerd is weer te geven?
Groeten!
Vandaar dat ik zelf over javascript begon. Zou het dus graag onChange zien.
Niet getest:
Code (js)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var chbs = document.getElementsByName('checkboxArray[]');
function countChecked() {
var cnt = 0;
for(i=0;i<chbs.length;i++) {
if(chbs[i].checked) cnt++;
}
return cnt;
}
</script>
var chbs = document.getElementsByName('checkboxArray[]');
function countChecked() {
var cnt = 0;
for(i=0;i<chbs.length;i++) {
if(chbs[i].checked) cnt++;
}
return cnt;
}
</script>
Gewijzigd op 08/02/2014 18:12:39 door Ger van Steenderen
Het is weer even geleden dat ik dit soort dingen met puur js gedaan heb, maar gelijk maar even een update:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
var chbs = document.getElementsByName('checkboxArray[]');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
var chbs = document.getElementsByName('checkboxArray[]');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
Edit: regeltje verplaatst (wel handig als het binnen de functie staat
Gewijzigd op 08/02/2014 18:39:36 door Ger van Steenderen
Ik heb nu dit:
Code (php)
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>-----</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
var chbs = document.getElementsByName('wie');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
</head>
<body>
//hier een heel stuk script wat ik weglaat omdat het niet relevant is.
<?
$result = mysql_query($query);
echo 'Totaal Aantal: '. mysql_num_rows($result);
echo '<form action="'. $_SERVER['REQUEST_URI']. '" method="POST">';
echo '<select multiple size="20" name="wie[]">';
while ( $row = mysql_fetch_array($result) ) {
echo '<option value="'. $row['email']. '" selected="selected">'. $row['voornaam']. ' '. $row['achternaam']. '</option>';
}
echo '</select><br><br>';
echo 'Aantal geselecteerd: <p id="counter"></p>';
echo '<br><br>';
echo '<input type="text" name="onderwerp" value="Onderwerp"><br>';
echo '<textarea name="tekst" rows="25" cols="120"></textarea><br>';
echo '<input type="submit" name="submit" value="Mailen">';
echo '</form>';
echo '</body>';
echo '</html>';
?>
<html>
<head>
<title>-----</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript">
var chbs = document.getElementsByName('wie');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
</head>
<body>
//hier een heel stuk script wat ik weglaat omdat het niet relevant is.
<?
$result = mysql_query($query);
echo 'Totaal Aantal: '. mysql_num_rows($result);
echo '<form action="'. $_SERVER['REQUEST_URI']. '" method="POST">';
echo '<select multiple size="20" name="wie[]">';
while ( $row = mysql_fetch_array($result) ) {
echo '<option value="'. $row['email']. '" selected="selected">'. $row['voornaam']. ' '. $row['achternaam']. '</option>';
}
echo '</select><br><br>';
echo 'Aantal geselecteerd: <p id="counter"></p>';
echo '<br><br>';
echo '<input type="text" name="onderwerp" value="Onderwerp"><br>';
echo '<textarea name="tekst" rows="25" cols="120"></textarea><br>';
echo '<input type="submit" name="submit" value="Mailen">';
echo '</form>';
echo '</body>';
echo '</html>';
?>
Wat doe ik verkeerd :) Kan al redelijk wat in PHP, maar Javascript is net Russisch voor me :)
Gewijzigd op 08/02/2014 21:46:35 door D B
Bij deze dus ..........
Toevoeging op 09/02/2014 12:27:54:
Ik heb het nu onderaan gezet, maar helaas geen resultaat.
Code (php)
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
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
<?
echo '<form action="'. $_SERVER['REQUEST_URI']. '" method="POST">';
echo '<select multiple size="20" name="wie[]">';
while ( $row = mysql_fetch_array($result) ) {
echo '<option value="'. $row['email']. '" selected="selected">'. $row['voornaam']. ' '. $row['achternaam']. '</option>';
}
?>
</select><br><br>
Aantal geselecteerd: <p id="counter">0</p>
<br><br>
<input type="text" name="onderwerp" value="Onderwerp"><br>
<textarea name="tekst" rows="25" cols="120"></textarea><br>
<input type="submit" name="submit" value="Mailen">
</form>
<script type="text/javascript">
var chbs = document.getElementsByName('wie');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
</body>
</html>
echo '<form action="'. $_SERVER['REQUEST_URI']. '" method="POST">';
echo '<select multiple size="20" name="wie[]">';
while ( $row = mysql_fetch_array($result) ) {
echo '<option value="'. $row['email']. '" selected="selected">'. $row['voornaam']. ' '. $row['achternaam']. '</option>';
}
?>
</select><br><br>
Aantal geselecteerd: <p id="counter">0</p>
<br><br>
<input type="text" name="onderwerp" value="Onderwerp"><br>
<textarea name="tekst" rows="25" cols="120"></textarea><br>
<input type="submit" name="submit" value="Mailen">
</form>
<script type="text/javascript">
var chbs = document.getElementsByName('wie');
for(i=0;i<chbs.length;i++) {
chbs[i].addEventListener('change', function(){
var cnt = 0;
for(j=0;j<chbs.length;j++) {
if(chbs[j].checked) cnt++;
}
document.getElementById('counter').innerHtml = cnt;
});
// document.getElementById('counter').innerHtml = cnt;
}
</script>
</body>
</html>
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form name="bla" method="post" action="xmltest.php">
<select id="wie" multiple="multiple" size="20" name="wie" onchange="valueCount()">
<option value="1">Een</option>
<option value="2">Twee</option>
<option value="3">Drie</option>
<option value="4">Vier</option>
</select>
</form>
<div id="counter">0</div>
<script type="text/javascript">
var sel = document.getElementById('wie');
function valueCount() {
cnt = 0;
for(i=0;i<sel.options.length;i++) {
if(sel.options[i].selected) {
cnt++;
}
}
document.getElementById('counter').innerHTML = cnt;
}
</script>
<select id="wie" multiple="multiple" size="20" name="wie" onchange="valueCount()">
<option value="1">Een</option>
<option value="2">Twee</option>
<option value="3">Drie</option>
<option value="4">Vier</option>
</select>
</form>
<div id="counter">0</div>
<script type="text/javascript">
var sel = document.getElementById('wie');
function valueCount() {
cnt = 0;
for(i=0;i<sel.options.length;i++) {
if(sel.options[i].selected) {
cnt++;
}
}
document.getElementById('counter').innerHTML = cnt;
}
</script>
Gewijzigd op 11/02/2014 19:21:00 door Ger van Steenderen