Span onclick with checkbox problem

Discussion in 'Javascript' started by GTi, Dec 14, 2005.

  1. GTi

    GTi Guest

    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:pointer;" 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; }
    }
    }
    GTi, Dec 14, 2005
    #1
    1. Advertising

  2. GTi

    BootNic Guest

    > "GTi" <> wrote:
    > news:....
    >
    > 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:pointer;" 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="cursor:pointer;">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.*
    BootNic, Dec 14, 2005
    #2
    1. Advertising

  3. GTi

    GTi Guest

    It shuld be:
    <label for="mybox" style="cursor:pointer;">
    <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?
    GTi, Dec 14, 2005
    #3
  4. 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:pointer;" 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
    Thomas 'PointedEars' Lahn, Dec 14, 2005
    #4
  5. GTi

    GTi Guest

    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.
    GTi, Dec 14, 2005
    #5
  6. GTi wrote:

    > It shuld be:
    > <label for="mybox" style="cursor:pointer;">
    > <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
    Thomas 'PointedEars' Lahn, Dec 14, 2005
    #6
  7. GTi

    GTi Guest

    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
    GTi, Dec 14, 2005
    #7
  8. 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
    Thomas 'PointedEars' Lahn, Dec 14, 2005
    #8
  9. GTi

    Tony Guest

    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:pointer;" 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.
    Tony, Dec 14, 2005
    #9
  10. GTi

    GTi Guest

    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:pointer;" 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.
    GTi, Dec 14, 2005
    #10
  11. 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:pointer;" 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
    Thomas 'PointedEars' Lahn, Dec 14, 2005
    #11
  12. GTi

    Tony Guest

    Thomas 'PointedEars' Lahn wrote:
    > 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:pointer;" 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.

    > > I see that happen quite often in .NET based pages.

    >
    > So?


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

    > > .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)


    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...
    Tony, Dec 14, 2005
    #12
  13. GTi

    GTi Guest

    Jasen Betts wrote:
    > On 2005-12-14, 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.

    >
    > that's a server side issue, are you using javascript on the server?
    >
    > > 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.

    >
    > 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.
    GTi, Dec 16, 2005
    #13
  14. Jasen Betts wrote:
    > Thomas 'PointedEars' Lahn wrote:

    <snip>
    >> [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.
    Richard Cornford, Dec 17, 2005
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    536
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,736
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    475
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    263
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    458
    Wang, Jay
    May 25, 2004
Loading...

Share This Page