PDA

View Full Version : Checkbox in form



andyc209
07-12-2010, 11:59 AM
I have a form with a checkbox in it. What I want is a popup to appear when the user hits the submit button to confirm they have selected the checkbox before posting the form.

So if they have selected the box (box X) i want


onclick="return confirm('Are you sure you want to select option x?');"
when the hit the submit button

but


onclick="return confirm('Are you sure you do not want to select option x?');"
when they hit it without selecting the checkbox

thanks for any help

jscheuer1
07-12-2010, 02:53 PM
Full demo, remarks follow:


<!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):


['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:


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.

andyc209
07-13-2010, 01:03 PM
wow thankyou so much that is exactly what i needed - top man!!