Full demo, remarks follow:
Code:
<!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=iso-8859-1">
<script type="text/javascript">
/* Validate Checkboxes Script ©2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
var valCheckbox = {
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})(),
setEvent: (function(){return window.addEventListener? function(bool, e){
if(!bool){
e.preventDefault();
e.isPrevented = true;
}
}:function(bool){
if(event.returnValue !== false){
event.returnValue = bool;
}
};
})(),
stopEvent: (function(){return window.addEventListener? function(e){
return e.isPrevented;
}:function(){
return event.returnValue === false;
};
})(),
val: function(e){
if(valCheckbox.stopEvent(e)){
return;
}
var proceed;
if(this.box.checked){
proceed = confirm('Are you sure you want to select option ' + (this.cN || this.box.name) + '?');
} else {
proceed = confirm('Are you sure you do not want to select option ' + (this.cN || this.box.name) + '?');
}
valCheckbox.setEvent(proceed, e);
},
run: function(form, box, confirmName){
var vc = this;
form = document.forms[form];
vc.box = form.elements[box];
vc.cN = confirmName;
valCheckbox.addEvent(form, 'submit', function(e){
valCheckbox.val.call(vc, e);
});
},
init: function(ar){
if(window.addEventListener){
ar.reverse();
}
for (var i = ar.length - 1; i > -1; --i){
new this.run(ar[i][0], ar[i][1], ar[i][2]);
}
}
};
valCheckbox.addEvent(window, 'load', function(){
valCheckbox.init([
['myform', 'x', 'X'], ['myform', 'y', 'Standby']
]);
});
</script>
</head>
<body>
<form name="myform" action="#">
<input type="text" name="bob"><br>
<label>X: <input type="checkbox" name="x" value="something"></label><br>
<label>Standby: <input type="checkbox" name="y" value="something"></label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Remarks:
The only configuration required is in this line (highlighted in the above code block, near the end of the script):
Code:
['myform', 'x', 'X']
where myform is the name of the form, x is the name of the checkbox, and X is the name of the option as you wish it displayed in the confirm dialogue.
If you do not provide the third parameter (X), it will use the name of the checkbox in the confirm dialogue.
You can do this as many times as you like within the valCheckbox.init block, ex:
Code:
valCheckbox.init([
['myform', 'x', 'X'],
['myform', 'y', 'Standby'],
['myform', 'z'],
['myotherform', 'x', 'C.O.D.'] // <-- no comma after the last one
]);
for different/multiple checkboxes and/or different/multiple forms.
Junior Coders
Checkbox in form
Posting Permissions
Reply With Quote
Bookmarks