neoconwannabe said:
Hi, [...]
My question is can I have the html form function normally if the user
has javascript
disabled? It would act as thought there were no javascript code
involved in the
form at all then.
Yes.
My reading was that you wanted the delete confirmed if JS was enabled,
but if it wasn't, the form just submits. Here is a script that
confirms when a user checks a box, but doesn't confirm when they
uncheck it. If they cancel the delete action, the box is unchecked.
When the form is submitted, if JS is enabled, the hidden checkbox js is
checked so you know at the server that they have already confirmed the
delete. If they don't have JS enabled, then you know they haven't been
given the prompt because the JS checkbox will not be checked.
I've used a label so you can click on the label text or the checkbox to
check/uncheck it.
Be careful with the reference to the label text. If you put the text
before the checkbox, then "a.nextSibling" will be undefined and an
error will result. You may want to use
"a.parentNode.childNodes[0].data" if the text is before the checkbox,
or "a.parentNode.childNodes[1].data" if you put the text after the
checkbox. I just like nextSibling because it's more concise but you
must put the label text after the checkbox.
*However*, as Andrew advises, if this is for a web site, the confirm
prompt is a bad idea and you should use a summary page to confirm what
the user wants. Yes, it's more laborious, but much more reliable and
if there are a lot of options, they all get confirmed in one go rather
than lots of separate confirms. Consider whether some other method of
confirmation is suitable, like such as a visual prompt in the page
(change the text label to grey or use strike-through or similar).
Cheers, Rob.
<script type="text/javascript">
function doIt(a) {
var b = (confirm('This will delete ' + a.nextSibling.data
+ '\nClick \'OK\' to confirm'));
if(b){
// Do the delete actions
} else {
a.checked=false;
}
}
</script>
<p>Click on a checkbox to delte the option</p>
<form action="">
<input type="checkbox" name="js" style="display: none;">
<label><input type="checkbox" name="opt1"
onclick="if(this.checked)doIt(this);">Option 1</label><br>
<label>Option 2<input type="checkbox" name="opt2"
onclick="if(this.checked)doIt(this);"></label><br>
<input type="reset">
<input type="submit" onclick="this.form.js.checked=true">
</form>
