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="cursorointer;" onclick="ClickBoxClick('IsProd');">
<input type="checkbox" name="IsProd" value="1" />
Is a Product
</span>


function ClickBoxClick(obj)
{
if(document.getElementsByTagName)
{
var el = document.getElementById(obj);
if(el.checked) { el.checked=false; }
else { el.checked = true; }
}
}

 

[BootNic]

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="cursorointer;" onclick="ClickBoxClick('IsProd');">
<input type="checkbox" name="IsProd" value="1" />
Is a Product
</span>

function ClickBoxClick(obj)
{
if(document.getElementsByTagName)
{
var el = document.getElementById(obj);
if(el.checked) { el.checked=false; }
else { el.checked = true; }
}
}

This is what label is for.

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

 

[GTi]

It shuld be:
<label for="mybox" style="cursorointer;">
<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]

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="cursorointer;" onclick="ClickBoxClick('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"><label
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(obj)
{
if(document.getElementsByTagName) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
{
var el = document.getElementById(obj); ^^^^^^^^^^^^^^^^^^^^^^^
if(el.checked) { el.checked=false; }
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]

It shuld be:
<label for="mybox" style="cursorointer;">
<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]

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.

 

[Thomas 'PointedEars' Lahn]

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]

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="cursorointer;" onclick="ClickBoxClick('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]

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="cursorointer;" onclick="ClickBoxClick('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.

 

[Thomas 'PointedEars' Lahn]

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="cursorointer;" onclick="ClickBoxClick('IsProd');">
<input type="checkbox" name="IsProd" value="1" />

^^^^[1] ^[2]

[2] IE does not support XHTML.

But, apparantly, .NET seems to force it -

That would be unfortunate (but typically M$), but I doubt that.
Do you get an error message or something if you omit the `/'?
If yes, what is it and with which code exactly does it occur?

I see that happen quite often in .NET based pages.
So?

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

Do not mix up server-side and client-side code. AFAIK `runat' is used
server-side for Web Controls, it does not occur in client-side code.
(CMIIW, I never had a requirement for .NET)

Maybe someone in a .NET group knows something about that.


PointedEars

 

[Tony]

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="cursorointer;" onclick="ClickBoxClick('IsProd');">
<input type="checkbox" name="IsProd" value="1" />
^^^^[1] ^[2]

[2] IE does not support XHTML.

But, apparantly, .NET seems to force it -

That would be unfortunate (but typically M$), but I doubt that.
Do you get an error message or something if you omit the `/'?
If yes, what is it and with which code exactly does it occur?

My understanding is that the input is built with a "controller" - some
sort of built-in class in the .NET framework. In order to omit the '/',
you would have to override the controller.

So?

Given that I handle the front-end (HTML layout, CSS, Javascript) for a
..NET web application, it's a PITA.

Do not mix up server-side and client-side code. AFAIK `runat' is used
server-side for Web Controls, it does not occur in client-side code.
(CMIIW, I never had a requirement for .NET)

It shows up in the HTML tag for form elements.

Maybe someone in a .NET group knows something about that.

Perhaps - it's not my thing, though. All I know is that .NET gives me
crappy code to have to work with. Ah well - back to JS...

 

[GTi]

that's a server side issue, are you using javascript on the server?


you need to let the server know which checkboxes are on the form.
a hidden field that is populated the page is generated if probably the
easiest way to do this.

be aware that people may abuse your server by submitting forma of their own
creation, so check all critical fields to ensure that the submitter has the
right to modify that field.

we had a php script (we think) exploited today someone sent spam to a few
thousand people I left my boss going over the logs.

Bye.
Jasen

For this we WANT the end user to create it's own forms to submit to our
"form" collector. And it is a intranet site - so we don't have mutch
problem with abuse I think.

 

[Richard Cornford]

Thomas 'PointedEars' Lahn wrote:

[2] IE does not support XHTML.

It seems to support the W3C validator page OK.

Then the W3C validator page, as served to IE, is not an XHTML document.
Remember that it is the HTTP content-type header that declares the type
of document when it is served over HTTP. That header is definitive, if
the mark-up does not correspond IE will attempt to error-correct it into
the appropriate type (or, more likely, a tag-soup approximation). IE
does not support XHTML.

Richard.