another question about validating checkboxes

[sophielois]

Hi again,

this is really a continuation from this thread:

http://www.tek-tips.com/viewthread.cfm?qid=1159198&page=4

Where i needed to limit the user to only selecting 2 checkboxes.

Because the form now has 2 fields checked the javascript supplied in my last post allows the user to check 4 boxes:

form

<form action="amendunit.php" method="post" onsubmit="return doSubmit();">
        <input type="checkbox" name="cb[]" value="HSC25" <?php if ($unit1 == 'HSC25' or $unit2 == 'HSC25') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC25<br />
        <input type="checkbox" name="cb[]" value="HSC210" <?php if ($unit1 == 'HSC210' or $unit2 == 'HSC210') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC210<br />
        <input type="checkbox" name="cb[]" value="HSC21314" <?php if ($unit1 == 'HSC21314' or $unit2 == 'HSC21314') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC213-14<br />
        <input type="checkbox" name="cb[]" value="HSC218" <?php if ($unit1 == 'HSC218' or $unit2 == 'HSC218') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC218<br />
		<input type="checkbox" name="cb[]" value="HSC219" <?php if ($unit1 == 'HSC219' or $unit2 == 'HSC219') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC219<br />
        <input type="checkbox" name="cb[]" value="HSC221" <?php if ($unit1 == 'HSC221' or $unit2 == 'HSC221') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC221<br />
        <input type="checkbox" name="cb[]" value="HSC223" <?php if ($unit1 == 'HSC223' or $unit2 == 'HSC223') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC223<br />
        <input type="checkbox" name="cb[]" value="HSC226" <?php if ($unit1 == 'HSC226' or $unit2 == 'HSC226') echo 'checked="checked"' ?> onclick="keepTrack(this);" /> HSC226<br />
<input type="submit" name="add" value="Proceed">
</form>

javascript

<script language="javascript" type="text/javascript">
<!-- Script checks that only 2 optional units can be selected

var totalCBs = 0;
var maxChecked = 2;

function keepTrack(c) {
    totalCBs += c.checked ? 1 : -1;
    enableDisable( c.form, totalCBs == maxChecked );
}

function enableDisable(f, b) {
    var e = f.elements;
    for (var i = 0; i < e.length; i++) {
        if (e[i].type == 'checkbox' && !e[i].checked) e[i].disabled = b;
    }
}

function doSubmit() {
    if (totalCBs!=maxChecked) {
        alert('You need to select ' + maxChecked + ' Optional Units');
        return false;
    }
    return true;
}
-->
</script>

How do i need to alter the script so that it still only allows 2 boxes to be checked?

Thanks again

Sophxx

 

[jpadie]

did anyone ever answer this or did you find a soln?

can't you just increment a counter in the php code every time a box is pre-checked and then use php to insert the counter value into the javascript code for totalCBs? you'd want to put some "just-in-case validation" in to make sure that the php didn't output more than two checkboxes that were prechecked.

 

[trollacious]

Why don't you cycle through all the checkboxes in your function and see how many are checked already then?

To makes sure that no more than 2 are checked initially, you'll have to write something in PHP to keep your server-side code from making too many of the boxes checked, too. That'd be done most easily in a function that you send the checkbox values to.

You'll run into problems with your names containing square brackets. Those aren't valid characters for HTML form names.

Lee