Span onclick with checkbox problem

[GTi]

I want to use a 'smarter' checkbox using span. When a user press the
text the checkbox is checked. But this dos't work as expected. Any
idea?
<span style="cursor:p ointer;" onclick="ClickB oxClick('IsProd ');">
<input type="checkbox" name="IsProd" value="1" />
Is a Product
</span>
function ClickBoxClick(o bj)
{
if(document.get ElementsByTagNa me)
{
var el = document.getEle mentById(obj);
if(el.checked) { el.checked=fals e; }
else { el.checked = true; }
}
}

[BootNic]

> "GTi" <tu****@gmail.c om> wrote:

news:11******** **************@ g44g2000cwa.goo glegroups.com.. ..

I want to use a 'smarter' checkbox using span. When a user press the
text the checkbox is checked. But this dos't work as expected. Any
idea?

<span style="cursor:p ointer;" onclick="ClickB oxClick('IsProd ');">
<input type="checkbox" name="IsProd" value="1" />
Is a Product
</span>

function ClickBoxClick(o bj)
{
if(document.get ElementsByTagNa me)
{
var el = document.getEle mentById(obj);
if(el.checked) { el.checked=fals e; }
else { el.checked = true; }
}
}

This is what label is for.

<input id="mybox" type="checkbox" name="IsProd" value="1">
<label for="mybox" style="cursor:p ointer;">Is a Product</label>

--
BootNic Wednesday, December 14, 2005 9:22 AM

Our earth is degenerate in these latter days; bribery and corruption are common; children no longer obey their parents; and the end of the world is evidently approaching.
*Assyrian clay tablet 2800 B.C.*

[GTi]

It shuld be:
<label for="mybox" style="cursor:p ointer;">
<input id="mybox" type="checkbox" name="IsProd" value="1">
Is a Product</label>

But then I have another problem:
Using checkboxes in a form dosn't post back the result when it is not
checked. That is a problem. So my next step was to extend this function
with a hidden input fields with values 0 or 1 if the checkbox.
This solution does not solve that problem - or?

[Thomas 'PointedEars' Lahn]

GTi wrote:

I want to use a 'smarter' checkbox using span. When a user press the
text the checkbox is checked. But this dos't work as expected. Any
idea?

<span style="cursor:p ointer;" onclick="ClickB oxClick('IsProd ');">
<input type="checkbox" name="IsProd" value="1" /> ^^^^[1] ^[2]

[2] IE does not support XHTML.
Is a Product
</span>
<input type="checkbox" name="IsProd" id="IsProdID" value="1"><labe l
for="IsProdID"> Is a Product</label>

No scripting is needed here at all, and the best of it is that it is
Valid HTML 4.01 Strict.
function ClickBoxClick(o bj)
{
if(document.get ElementsByTagNa me) ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^ {
var el = document.getEle mentById(obj); ^^^^^^^^^^^^^^^ ^^^^^^^^ if(el.checked) { el.checked=fals e; }
else { el.checked = true; }
}
}

Your script does not work because names are not IDs.[1]

You are insufficiently feature-testing the wrong property
and your indentation style allows for improvement, BTW.
PointedEars

[GTi]

OK my bad - the label can be almost anywhere on the page as long as it
ref to the id name.
But it will not solve my other problem I think.

[Thomas 'PointedEars' Lahn]

GTi wrote:

It shuld be:
<label for="mybox" style="cursor:p ointer;">
<input id="mybox" type="checkbox" name="IsProd" value="1">
Is a Product</label>
It CAN be, there is no MUST. However, experience shows that including
a label element for an ID that was not parsed yet is error-prone, so it
SHOULD NOT be as above but instead as BootNic and I posted.
But then I have another problem:
Using checkboxes in a form dosn't post back the result when it is not
checked. That is a problem.
That is no problem. Why would you be interested in unchecked checkboxes?
So my next step was to extend this function
with a hidden input fields with values 0 or 1 if the checkbox.
This solution does not solve that problem - or?

This "solution" introduces more problems than it "solves", for example
the dependency on client-side script support and thus the inevitable
unreliability of the posted data.
PointedEars

[GTi]

Thomas 'PointedEars' Lahn wrote:

But then I have another problem:
Using checkboxes in a form dosn't post back the result when it is not
checked. That is a problem.
That is no problem. Why would you be interested in unchecked checkboxes?

When the target page recieves the form it will not see that the
checkbox was on the form and leaves the value unchanged in the
database. But if I have a value telling it is turned off it will change
the value in the database. I know that this is by design, but I'm
trying to keep a common target page for all kind of changes in the
database (on one table). That way I can have several forms and only
display what fields I want to change with only one target page.

So my next step was to extend this function
with a hidden input fields with values 0 or 1 if the checkbox.
This solution does not solve that problem - or?

This "solution" introduces more problems than it "solves", for example
the dependency on client-side script support and thus the inevitable
unreliability of the posted data.
PointedEars

[Thomas 'PointedEars' Lahn]

GTi wrote:

Thomas 'PointedEars' Lahn wrote:

> But then I have another problem:
> Using checkboxes in a form dosn't post back the result when it is not
> checked. That is a problem.

That is no problem. Why would you be interested in unchecked checkboxes?

When the target page recieves the form it will not see that the
checkbox was on the form and leaves the value unchanged in the
database. But if I have a value telling it is turned off it will change
the value in the database. I know that this is by design, but I'm
trying to keep a common target page for all kind of changes in the
database (on one table). That way I can have several forms and only
display what fields I want to change with only one target page.

So you just need to assume a default value server-side and
modify the database always or compare with the value in the
DB first, or use groups of two radiobuttons.
PointedEars

[Tony]

Thomas 'PointedEars' Lahn wrote:

GTi wrote:

I want to use a 'smarter' checkbox using span. When a user press the
text the checkbox is checked. But this dos't work as expected. Any
idea?

<span style="cursor:p ointer;" onclick="ClickB oxClick('IsProd ');">
<input type="checkbox" name="IsProd" value="1" />

^^^^[1] ^[2]

[2] IE does not support XHTML.

But, apparantly, .NET seems to force it - I see that happen quite often
in .NET based pages.

..NET also has the runat="" attribute, which is not valid 4.01 strict,
either.

I'm just wondering if you have any suggestions on how to deal with that
(and don't say don't use .NET - it's not an option, unfortunately :( )
It's been a source of frustration to me for some time, but I have no
ideas how to deal with it.

[GTi]

Tony wrote:

Thomas 'PointedEars' Lahn wrote:

GTi wrote:

I want to use a 'smarter' checkbox using span. When a user press the
text the checkbox is checked. But this dos't work as expected. Any
idea?

<span style="cursor:p ointer;" onclick="ClickB oxClick('IsProd ');">
<input type="checkbox" name="IsProd" value="1" />

^^^^[1] ^[2]

[2] IE does not support XHTML.

But, apparantly, .NET seems to force it - I see that happen quite often
in .NET based pages.

.NET also has the runat="" attribute, which is not valid 4.01 strict,
either.

I'm just wondering if you have any suggestions on how to deal with that
(and don't say don't use .NET - it's not an option, unfortunately :( )
It's been a source of frustration to me for some time, but I have no
ideas how to deal with it.

Yes - it is .NET and no I don't have any solution for that.
BUT i'm doing some "the hard way" by creating my own classes and tags.
I always use Firefox and IE to test my code. Firefox has many
extensions for HTML validations. And yes - it complains a lot about
..NET generated code.