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

A

apparker

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

-Lost

apparker said:
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.

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

Sure, submit all your checkboxes (and the form) to your server-side script. Of course, if
checked, submit 1, if not, 0.

-Lost
 
L

-Lost

Wow that's great stuff... looks like the code is built around the
checkbox but could be altered for radios?

I do not see why not.
Would it be possible to not
have the checkbox at all?

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
 
A

apparker

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

perfect... love it, thanks so much!
 
A

apparker

perfect... love it, thanks so much!

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

-Lost

apparker said:
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.

In a word, yes.

-Lost
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
oglegroups.com>, Wed, 28 Mar 2007 12:12:22, apparker
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.

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

Roger

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>
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top