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

  2. GTi

    BootNic Guest

    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, Dec 14, 2005
    #2
    1. Advertisements

  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. ^^^^[1] ^[2]

    [2] IE does not support XHTML.
    <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.
    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. 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.
    That is no problem. Why would you be interested in unchecked checkboxes?
    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

    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.
     
    GTi, Dec 14, 2005
    #7
  8. 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

    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

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

    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.
    Given that I handle the front-end (HTML layout, CSS, Javascript) for a
    ..NET web application, it's a PITA.
    It shows up in the HTML tag for form elements.
    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

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.