On Mon, Jul 13, 2009 at 15:49, Matt Zagrabelny<mzagr...@d.umn.edu> wrote:
>> The glitch is probably caused by the fact that the two input fields
>> *do* share the same name; then when you touch one, you *do* alter
>> both! Bug or feature?
>
> Having two DOM elements with the same name attribute is still valid (see
> <input type="radio">.)
Sure it is.
But that doesn't mean that you could abuse the language, because, you
know, that would lead to unpredictable results.
You should be already aware of that, you experienced it!
<form action="" method="post">
<p><label><input name="test" value="0" type="radio" /> value0</label></p>
<p><label><input name="test" value="1" type="radio"
checked="checked" /> value1</label></p>
<p><label><input name="test" value="2" type="radio" /> value2</label></p>
<p><button name="test" value="ouch" type="submit">Mess everything
up!</button></p>
</form>
<pre><?php if (true === array_key_exists('test', $_POST)) { echo
'$_POST[\'test\'] = ', $_POST['test']; } ?></pre>
After running this code, what do you get? You get 'ouch'!
Maybe you *did* wanted that, but maybe you did not.
You certainly can assign the same name to different inputs / selects /
textareas / buttons, but not just because you can, it means you
should... After all, the form will send the last value set only...
So, leave checkboxes as checkboxes, and hidden input as hidden inputs,
using different names.
You get no advantage in messing up.
> My main question is how does both the 'if' block and the 'else' block get
> executed in the same pass through the function?
As other people in this thread already pointed out, this cannot happen. Ever.
Debuggers are your best friends. Show them some love, 'cause they make
your life easier.
>> As far as I got it, (and pretending that I got it right) you're trying
>> to enable/disable an hidden input field based on another checkbox's
>> checked state.
>
> That is it.
Yay.
> That way only one of the two inputs of name="billable" get sent to the
> handler on the server.
ORLY!? So, how, I say, HOW in the world you came up with some solution
like that!? *_*
It simply doesn't make sense! :-)
I mean, come on: a simple checkbox is enough!
<form action="" method="get">
<p><input name="billable" type="checkbox" id="billable" /> <label
for="billable">Billable</label></p>
<p><button type="submit">Show me!</button></p>
</form>
After submitting, in the address bar you'll see '?billable=on' if
checkbox was ticked, '?' otherwise. There, solved.
Server handler checks against 'Yes'? Or against 'No'? Solved too!
<form action="" method="get">
<p><input name="billable" value="Yes" type="checkbox" id="billable"
/> <label for="billable">Billable</label></p>
<p><button type="submit">Show me!</button></p>
</form>
Different value, same pattern: ?billable=Yes if checked, '?' otherwise.
I'll skip the 'No' case, bear with me, huh? ;-)
> This page is a RT (request tracker) module and RT handles the processing
> of the (server-side.) I would rather not modify the RT codebase to
> handle the checkbox - I thought it could be done via JS.
Web Development Rule #1: never, ever, trust user-generated data.
Corollary #1 to Web Development Rule #1: client-side validation is evil.
Corollary #2 to Web Development Rule #1: client-side validation can be
dangerous if it's the ONLY validation.
<?php
# pretending you're using POST requests and value="Yes" for the checkbox
if (true === array_key_exists('billable', $_POST) && 'Yes' ===
$_POST['billable']) {
# Do some utterly cool stuff here.
} else {
# Huh, the billable checkbox was not checked: let's do something
different.
}
?>
Total changed lines: 1.
Now you got no excuses, buddy! ^L^ :-P
> My main questions still stands, how does both the 'if' and 'else' blocks
> get executed on the same pass through the function?
First of all: C null and JavaScript null are totally unrelated things;
stop thinking and writing JavaScript as if it were C ;-)
Instead, first launch:
console.log(typeof something); // return a type like 'function',
'object', or 'number', etc.
Then use:
if ('expected type' === typeof something) {
// everything is ok, let's move on
} else {
// something wrong happened.
}
Anyway, here's my test case:
XHTML
<form action="" method="get">
<p><input name="billable" value="No" type="hidden" id="billable_hidden" /></p>
<p><input name="billable" value="Yes" type="checkbox"
id="billable_checkbox" /> <label
for="billable_checkbox">Billable</label></p>
</form>
JavaScript -- just added some calls to the console logger
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
add_billable_oncheck();
});
function add_billable_oncheck () {
var billable_hidden = $('#billable_hidden')[0];
var billable_checkbox = $('#billable_checkbox')[0];
if ((billable_hidden != null) && (billable_checkbox != null)) {
console.log('entering first if block');
$(billable_checkbox).change(function () {
console.log('billable_checkbox has changed state!');
if (billable_checkbox.checked) {
console.log('billable_checkbox is checked!');
billable_hidden.disabled = true;
} else {
billable_hidden.disabled = false;
console.log('billable_checkbox is not
checked!');
}
});
console.log('exiting first if block');
}
}
</script>
On page load, in the console, you'll see:
entering first if block
exiting first if block
(Everything seems to be ok.)
On clicking the checkbox once:
billable_checkbox has changed state!
billable_checkbox is checked!
(Everything still seems to be ok.)
On clicking the checkbox one more time:
billable_checkbox has changed state!
billable_checkbox is not checked!
(Still everything ok.)
So, as you can see, it's *not* like you say ;-)
Only one of them get executed, as it SHOULD be. :-)
To sum up: change your server-side code, it's worth it! :)
Hope to have been helpful.
--
Massimo Lombardo
Linux user #437712
