change text color onclick, and change it back - will post to DB

Discussion in 'Javascript' started by apparker, Mar 28, 2007.

  1. apparker

    apparker Guest

    I'm creating a new GUI for a program and it is for a medical exam.
    There are so many different things to ask someone during a history it
    wastes too much space to make checkboxes for everything so I had an
    idea:

    Can I simply create a list of conditions and when the doctor clicks
    them, they turn red? And clicking them again would make them default
    again? This would really make the exam better since the doctor could
    quickly glance at a page of hundreds of things and see what the person
    has.

    I'd also like the event to post "1" or "0" to DB so the conditions can
    be saved into the DB.

    Anyone ever heard of something like this?
     
    apparker, Mar 28, 2007
    #1
    1. Advertisements

  2. apparker

    -Lost Guest

    You are in luck. Very recently someone threw together a nifty example.

    http://groups.google.com/group/comp...lnk=gst&q=alternative&rnum=5#b29b47d50fc007b1
    Sure, submit all your checkboxes (and the form) to your server-side script. Of course, if
    checked, submit 1, if not, 0.

    -Lost
     
    -Lost, Mar 29, 2007
    #2
    1. Advertisements

  3. apparker

    apparker Guest

    Wow that's great stuff... looks like the code is built around the
    checkbox but could be altered for radios? Would it be possible to not
    have the checkbox at all?
     
    apparker, Mar 29, 2007
    #3
  4. apparker

    -Lost Guest

    I do not see why not.
    Visually? Sure, hide them via CSS (display: none; will destroy layout; visibility:
    hidden; will preserve it).

    You do not want to get rid of the checkboxes or radio inputs altogether. You would have
    to code a scheme by which to trap 1 and 0s, and eventually send it to the server.

    Keeping the form intact insures the ability to submit form contents.

    -Lost
     
    -Lost, Mar 29, 2007
    #4
  5. apparker

    apparker Guest

    perfect... love it, thanks so much!
     
    apparker, Mar 29, 2007
    #5
  6. apparker

    apparker Guest

    another question, could other css styles interfere with this trick? I
    got it working on a simple page, but not a complicated one with lots
    of js and css styles.
     
    apparker, Mar 29, 2007
    #6
  7. apparker

    -Lost Guest

    In a word, yes.

    -Lost
     
    -Lost, Mar 29, 2007
    #7
  8. In comp.lang.javascript message <
    oglegroups.com>, Wed, 28 Mar 2007 12:12:22, apparker
    This illustrates the fundamentals of part of a possibility :-

    <span onClick="alert(this.style.color=new Date()%0x1000000)">hhh</a>

    But test the human-interface aspects carefully before committing
    yourself to the approach.

    It could be useful to select with a checkbox, but re-colour the
    associated text as a better indication.

    Perhaps each condition should have four states -
    Default unconsidered
    Condition applies
    Condition does not apply
    Condition considered but undecided.

    It's a good idea to read the newsgroup c.l.j and its FAQ. See below.
     
    Dr J R Stockton, Mar 29, 2007
    #8
  9. apparker

    Roger Guest

    Hi,

    I asked the question leading to the response referenced above. Pasted
    below is my modified script that processes radio buttons as well as
    check boxes.

    I ended up wrapping the input tag within the label tag and using
    parentNode instead of nextSibling. nextSibling worked fine in the
    example referenced above but can easily break if the input and label
    tags are formatted on different lines (whitespace becomes a text node
    and becomes the nextSibling).

    As stated in the referenced thread, my form is pretty dense and may have
    a hundred check boxes or radio buttons. The buff-ish background and
    crimson colors seem to work well for me. I think the indentation below
    is messed up from my translation from tabs to spaces -- sorry.

    Roger


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>

    <title>
    highlight checkbox labels
    </title>

    <style type="text/css">
    body {background: #FFEBCD; color: #382400; font-family:
    verdana,arial,sans-serif;}
    ..unchecked{ font-size: xx-small;}
    ..checked{ font-size: xx-small; color:crimson; font-weight:bold;}
    ..noBorder {font-size: xx-small;}
    ..numeric {text-align: right;}
    </style>

    <script type="text/javascript">
    // Change the class name of a checkbox or radio button label to
    highlight checked items
    function setLabelStyle(x){
    if (x.checked){
    x.parentNode.className="checked";
    if (x.getAttribute("type") == "radio") {
    xName = x.name;
    set = document.getElementsByName(xName);
    for (var i=0;i<set.length;i+=1) {
    if (!set.checked) {
    set.parentNode.className="unchecked"; }
    }
    }
    }
    else{
    x.parentNode.className="unchecked";
    }
    }

    </script>

    </head>
    <body>
    <form action="someaction">
    <center>
    <table>
    <tr>
    <td>
    <label class="unchecked">
    <input type="checkbox" id="check1"
    onclick="setLabelStyle(this);">
    Abraided
    </label>
    <br />
    <label class="unchecked">
    <input type="checkbox" id="check2"
    onclick="setLabelStyle(this);">
    Incised
    </label>
    <br />
    <label class="unchecked">
    <input type="checkbox" id="check3"
    onclick="setLabelStyle(this);">
    Pecked
    </label>
    <br />
    <label class="unchecked">
    <input type="checkbox" id="check4"
    onclick="setLabelStyle(this);">
    Scratched
    </label>
    <br />
    </td>

    <td>
    <label class="unchecked">
    <input type="radio" id="check21" name="myradio"
    onclick="setLabelStyle(this);">
    Abraided
    </label>
    <br />
    <label class="unchecked">
    <input type="radio" id="check22" name="myradio"
    onclick="setLabelStyle(this);">
    Incised
    </label>
    <br />
    <label class="unchecked">
    <input type="radio" id="check23" name="myradio"
    onclick="setLabelStyle(this);">
    Pecked
    </label>
    <br />
    <label class="unchecked">
    <input type="radio" id="check24" name="myradio"
    onclick="setLabelStyle(this);">
    Scratched
    </label>
    <br />
    </td>
    </tr>
    </table>

    </center>
    </form>
    </body>
    </html>
     
    Roger, Mar 31, 2007
    #9
  10. apparker

    ASM Guest

    ASM, Mar 31, 2007
    #10
  11. apparker

    apparker Guest

    apparker, Apr 3, 2007
    #11
    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.