JavaScript help

Cilpot · Jun 28, 2005

I have a form consisting of a variable number of checkboxes generated from a php-loop. What I want to do is to count the number of checked checkboxes (and display this number) and de-activate them once a number has been reached.

For example, consider the form as a 'vote' and there are 50 options, but only 10 are allowed to be chosen. When 10 checkboxes has been checked a message will say that no more choices are allwed. And while checking a number is displayed saying how many choises are left.

Help greatly appreciated

stormbind · Jun 28, 2005

This is a quicky that is untested with no implied warranty, but hopefully it will act as a guide. The elements on the page have to be rendered before the script starts so initiate it with document.body.onload or add it inline to the bottom of the page.

I write all scripts so that no editing to the HTML is required.

Code:

// First thing to do is get an array of all the checkboxes
// ae : all (form) elements
// cb : checkboxes

var ae = document.forms[0].elements; // not sure about this?
var cb = new Array();
for (i=0;i!=ae.length;i++){
if (ae[i].type=='checkbox') cb.push(ae[i]);
}

// Then you need to have the checkboxes fire a function each time they are clicked

for (i=0;i!=cb.length;i++){
cb[i].attachEvent('onclick',cb_count);
}

function cb_count(){
var counter = 0;
 for (i=0;i!=cb.length;i++){
   if (cb[i].checked) counter++;
 }
if (counter > 9){
 for (i=0;i!=cb.length;i++) cb[i].disabled='true';
 alert('Limit reached. You have checked '+counter+' boxes.'); // job done (I think)
}
}

 // you can add an element to the page that always displays current counter:
 // document.getElementById('counter_output').innerHTML=counter;

AlanH · Jun 28, 2005

Here's some code for a page that does some of what you want. I'm sure it can be done neater and cleaner, and you'll no doubt have different ideas on what you really want it to do.

[EDIT] Sorry, cross posted with Stormbind. See ... I knew there was a neater way to do it

Code:

<?php
	$num_options = 50;
	// process the form
	$options = $HTTP_GET_VARS['option'];
	if (!empty($options)) {
		// do what you need to do that record the votes
	}
?>

<head>
<script language="JavaScript" type="text/javascript">
function count_votes() {
    var id;
    var box;
    var count = 0;
    // count the number of checked boxes
    for (i = 0; i < <?php echo $num_options; ?>; i ++) {
        id = "check_"+i;
        box = document.getElementById (id);
        if (box.checked)
            count ++;
    }
    // update the "votes" text
    var num_votes_field = document.getElementById ("votes");
    num_votes_field.innerHTML = count;
    // check for the maximum number of options
    if (count >=10) {
        // disable the checkboxes
        for (i = 0; i < <?php echo $num_options; ?>; i ++) {
            id = "check_"+i;
            box = document.getElementById (id);
            box.disabled = true;
        }
    }
}
</script>
</head>
<body>
<form>
<div id="votes" name="votes">0</div>
<input type = "submit">
<table>
<?php
for ($opt = 0; $opt < $num_options; $opt ++) {
	$check = (in_array ("check_$opt",$options) ? 'checked' : '');
    echo "<tr><td><input type=\"checkbox\" name=\"option[]\" id=\"check_$opt\" value=\"check_$opt\" onchange=\"count_votes();\" $check></td><td>Option $opt</td></tr>\n";
}
?>
</table>
</form>
</body>

stormbind · Jun 28, 2005

The number of times I went through the same loop disqualifies it from being neat

Cilpot · Jun 28, 2005

Man, incredible!! Thank you very much.. Both of you :goodjob:

(I incorporated a version of AlanH's solution, btw)

AlanH · Jun 28, 2005

stormbind said:
The number of times I went through the same loop disqualifies it from being neat

Well, if your checkbox array build works you've done a better job of javascript encapsulation than me. I feel writing javascript dynamically using php is a bit messy - a little bit like self-modifying code.

stormbind · Jun 28, 2005

Cilpot and yourself are obviously PHP programmers where server side & client side code are mixed together.

I prefer PERL & JavaScript, where server side & client side code are completely separate. In my opinion, this helps webmasters and administrators to work side-by-side without stepping on each other's toes.

There is no right or wrong though

stormbind · Jun 28, 2005

AlanH said:
if your checkbox array build works

What do you take me for?

Popping the initial array of elements might have conserved a miniscule amount of memory, so there could have been a number of tweaks. I just covered up one error :mischief:

Cilpot · Jul 6, 2005

Thanks again guys, it's now up and running :goodjob:

I must admit that even though I work as a PHP-developer, my JavaScript skills are embarresingly sub-par.

JavaScript help

Cilpot

Pretentious Schmuck

stormbind

Retenta personam!

AlanH

Mac addict, php monkey

stormbind

Retenta personam!

Cilpot

Pretentious Schmuck

AlanH

Mac addict, php monkey

stormbind

Retenta personam!

stormbind

Retenta personam!

Cilpot

Pretentious Schmuck

Similar threads