I have a form with multiple checkboxes. When at least one is checked or unchecked, need to enable/disable some input elements. This form is a listing of available classes an individual could sign up for. If no checked checkbox then show no
username, email, nor
submit elements; Otherwise, show these 3 elements. Here is some code:
<!DOCTYPE html> <html> <head> </head> <body>
<form name='calculusclassform' method="post" action="">
<fieldset>
<legend>Choose your <b>Class</b> interests</legend>
<input type="checkbox" id="oil" name="interest[]" value="Oil Refinery Optimization" onchange="handleChange();">
<label for="oil">Oil Refinery Optimization</label>
<span>Crude oil ...</span>
<input type="checkbox" id="curvfit" name="interest[]" value="Curve Fitting Data sets" onchange="handleChange();">
<label for="curvfit">Curve Fitting Data sets</label>
<span>Have a curve fitting problem? ...</span>
<input type="checkbox" id="coding" name="interest[]" value="Calculus-level Coding" onchange="handleChange();">
<label for="coding">Calculus-level Coding</label>
<span> languages ... </span>
<h3>Classes are free, but in return, we ask you to share these class offerings with 5+ others. Thanks.</h3>
<span> Name:</span>
<input type="name" name="username" id="username" disabled><br>
Email Address:
<input type="email" name="email" id="email" disabled><br><br>
<input type="submit" value="Submit" id="submit" disabled>
</fieldset>
</form>
<script>
function handleChange(cb) {
var checkboxes = document.getElementByName("interest[]").checked;
var user = document.getElementById("username");
var email = document.getElementById("email");
var submit = document.getElementById("submit");
for (var i = 0; i < checkboxes.length; i++) {
display("Changed, new value = " + cb.checked);
// echo("You did select at least one check box.");
user.disabled = false;
email.disabled = false;
submit.disabled = false;
else {
// echo("You didn't select any check boxes.");
user.disabled = true;
email.disabled = true;
submit.disabled = true; }
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</body> </html>
