Dynamic Display of Radio/Checkboxes

S

Scott

Relative newbie here,

I'm looking to display the value of radio buttons and check boxes on the
page before submission. So far I can do most of it. When "Hat" is checked
there are to be no color options available. Click on shirt or pants, you
have three options, (actually four if you chose "None"). Shirts and pants
can have multiple colors.

OK, here is the issue, if you choose a color then change your mind and then
un-check the box, it doubles up the 'display' on the page ("strCavTop"). I
want it to clear the 'display' ("strCavTop") of that one value if the box is
clicked to un-check it.

Is there another way to display the data other than a form text box, like a
table cell or something similar? I willing to bet there is a more
economical way to do this, so if there is I'm open to any suggestions.

Thanks Much,

Scott

(Code below)

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function GreyOut() {
chk=document.forms[0]
{
chk.NONE. checked=false;
chk.NONE. disabled=true;
chk.BLUE. disabled=true;
chk.RED. disabled=true;
chk.WHITE. disabled=true;
}
}
////////////////////////////////////////////////////////////////////////////
//////////////////////
function Disab(val) {
frm=document.forms[0]
if(val=="HAT")
{
frm.NONE. disabled=true;
frm.BLUE. disabled=true;
frm.RED. disabled=true;
frm.WHITE. disabled=true;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="HAT";
frm.strCavTop.value="";
}

if(val=="SHIRT")
{
frm.NONE. disabled=false;
frm.BLUE. disabled=false;
frm.RED. disabled=false;
frm.WHITE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="SHIRT";
frm.strCavTop.value="";
}

if(val=="PANTS")
{
frm.NONE. disabled=false;
frm.BLUE. disabled=false;
frm.RED. disabled=false;
frm.WHITE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="PANTS";
frm.strCavTop.value="";
}

if(val=="NONE")
{
frm.NONE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strCavTop.value="";
}

if(val=="BLUE")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}

if(val=="RED")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}

if(val=="WHITE")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}
}
////////////////////////////////////////////////////////////////////////////
/////////////////////
function makeBlue() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//BLUE";
}
}

function makeRed() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//RED";
}
}

function makeWhite() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//WHITE";
}
}
////////////////////////////////////////////////////////////////////////////
/////////////////////
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="GreyOut()">
<FORM NAME="frmMyForm">

<table border="0" width="100%" height="100%" cellspacing="0"
cellpadding="0">
<tr>
<td>
<INPUT TYPE="text" NAME="strClassTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:right" size="21"><INPUT
TYPE="text" NAME="strCavTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:left" size="50"></td>
</tr>
<tr>
<td valign="top">
<div align="center">
<table>
<tr>
<td align="right">HAT</td>
<td align="left">
<input name="classification" type="radio" value="HAT"
onClick="Disab(this.value)"><input type="hidden" name="class"></td>
<td>&nbsp;</td>
<td align="right">None</td>
<td>
<input type="checkbox" value="NONE" name="NONE"
OnClick="Disab(this.value)"></td>
</tr>
<tr>
<td align="right">SHIRT</td>
<td align="left">
<input name="classification" type="radio" value="SHIRT"
onClick="Disab(this.value)"></td>
<td>&nbsp;</td>
<td align="right">BLUE</td>
<td>
<input type="checkbox" value="BLUE" name="BLUE" onClick="Disab(this.value),
makeBlue()"></td>
</tr>
<tr>
<td align="right">PANTS</td>
<td align="left">
<input name="classification" type="radio" value="PANTS"
onClick="Disab(this.value)"></td>
<td>&nbsp;</td>
<td align="right">RED</td>
<td>
<input type="checkbox" value="RED" name="RED" onClick="Disab(this.value),
makeRed()"></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left">
&nbsp;</td>
<td>&nbsp;</td>
<td align="right">WHITE</td>
<td>
<input type="checkbox" value="WHITE" name="WHITE"
onClick="Disab(this.value), makeWhite()"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left">
</tr>
</table>
</FORM>

</BODY>
</HTML>
 
S

Stephen Chalmers

Scott said:
Relative newbie here,

I'm looking to display the value of radio buttons and check boxes on the
page before submission. So far I can do most of it. When "Hat" is checked
there are to be no color options available. Click on shirt or pants, you
have three options, (actually four if you chose "None"). Shirts and pants
can have multiple colors.

OK, here is the issue, if you choose a color then change your mind and then
un-check the box, it doubles up the 'display' on the page ("strCavTop"). I
want it to clear the 'display' ("strCavTop") of that one value if the box is
clicked to un-check it.

Is there another way to display the data other than a form text box, like a
table cell or something similar? I willing to bet there is a more
economical way to do this, so if there is I'm open to any suggestions.

Thanks Much,

Scott
Click to expand...
Just write a single function called by the onclick event of all the
checkboxes, which always clears the display, then checks the state of all
the checkboxes and appends appropriate text to the textbox.
 
S

Scott

Thanks for the help,

This seems to work as a separate function for each checkbox, is this you
meant, or is there a simpler way, other than repeating this function for
each checkbox?

Thanks again,



function checkBlue(val) {

zzz=document.forms[0]

if(zzz.Blue.checked==true)

{

frm.strCavTop.value=frm.strCavTop.value+"//Blue";

}

else if(zzz.Blue.checked==false)

{

frm.strCavTop.value=frm.strCavTop.value.replace("//Blue", "");

}

}









Scott said:
Relative newbie here,

I'm looking to display the value of radio buttons and check boxes on the
page before submission. So far I can do most of it. When "Hat" is checked
there are to be no color options available. Click on shirt or pants, you
have three options, (actually four if you chose "None"). Shirts and pants
can have multiple colors.

OK, here is the issue, if you choose a color then change your mind and then
un-check the box, it doubles up the 'display' on the page ("strCavTop"). I
want it to clear the 'display' ("strCavTop") of that one value if the box is
clicked to un-check it.

Is there another way to display the data other than a form text box, like a
table cell or something similar? I willing to bet there is a more
economical way to do this, so if there is I'm open to any suggestions.

Thanks Much,

Scott

(Code below)

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function GreyOut() {
chk=document.forms[0]
{
chk.NONE. checked=false;
chk.NONE. disabled=true;
chk.BLUE. disabled=true;
chk.RED. disabled=true;
chk.WHITE. disabled=true;
}
}
////////////////////////////////////////////////////////////////////////////
//////////////////////
function Disab(val) {
frm=document.forms[0]
if(val=="HAT")
{
frm.NONE. disabled=true;
frm.BLUE. disabled=true;
frm.RED. disabled=true;
frm.WHITE. disabled=true;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="HAT";
frm.strCavTop.value="";
}

if(val=="SHIRT")
{
frm.NONE. disabled=false;
frm.BLUE. disabled=false;
frm.RED. disabled=false;
frm.WHITE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="SHIRT";
frm.strCavTop.value="";
}

if(val=="PANTS")
{
frm.NONE. disabled=false;
frm.BLUE. disabled=false;
frm.RED. disabled=false;
frm.WHITE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strClassTop.value="PANTS";
frm.strCavTop.value="";
}

if(val=="NONE")
{
frm.NONE. disabled=false;
frm.NONE. checked=true;
frm.BLUE. checked=false;
frm.RED. checked=false;
frm.WHITE. checked=false;
frm.strCavTop.value="";
}

if(val=="BLUE")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}

if(val=="RED")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}

if(val=="WHITE")
{
frm.NONE. disabled=false;
frm.NONE. checked=false;
}
}
////////////////////////////////////////////////////////////////////////////
/////////////////////
function makeBlue() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//BLUE";
}
}

function makeRed() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//RED";
}
}

function makeWhite() {
frm=document.forms[0]
{
frm.strCavTop.value=frm.strCavTop.value+"//WHITE";
}
}
////////////////////////////////////////////////////////////////////////////
/////////////////////
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="GreyOut()">
<FORM NAME="frmMyForm">

<table border="0" width="100%" height="100%" cellspacing="0"
cellpadding="0">
<tr>
<td>
<INPUT TYPE="text" NAME="strClassTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:right" size="21"><INPUT
TYPE="text" NAME="strCavTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:left" size="50"></td>
</tr>
<tr>
<td valign="top">
<div align="center">
<table>
<tr>
<td align="right">HAT</td>
<td align="left">
<input name="classification" type="radio" value="HAT"
onClick="Disab(this.value)"><input type="hidden" name="class"></td>
<td>&nbsp;</td>
<td align="right">None</td>
<td>
<input type="checkbox" value="NONE" name="NONE"
OnClick="Disab(this.value)"></td>
</tr>
<tr>
<td align="right">SHIRT</td>
<td align="left">
<input name="classification" type="radio" value="SHIRT"
onClick="Disab(this.value)"></td>
<td>&nbsp;</td>
<td align="right">BLUE</td>
<td>
<input type="checkbox" value="BLUE" name="BLUE" onClick="Disab(this.value),
makeBlue()"></td>
</tr>
<tr>
<td align="right">PANTS</td>
<td align="left">
<input name="classification" type="radio" value="PANTS"
onClick="Disab(this.value)"></td>
<td>&nbsp;</td>
<td align="right">RED</td>
<td>
<input type="checkbox" value="RED" name="RED" onClick="Disab(this.value),
makeRed()"></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left">
&nbsp;</td>
<td>&nbsp;</td>
<td align="right">WHITE</td>
<td>
<input type="checkbox" value="WHITE" name="WHITE"
onClick="Disab(this.value), makeWhite()"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left">
</tr>
</table>
</FORM>

</BODY>
</HTML>
Click to expand...
 
S

Stephen Chalmers

Scott said:
Thanks for the help,

This seems to work as a separate function for each checkbox, is this you
meant, or is there a simpler way, other than repeating this function for
each checkbox?

Thanks again,
Click to expand...
I was thinking more of having a single function to reprise the whole form
whenever any element changes, taking parameters where necessary to indicate
the most recent action:


<HTML>
<HEAD>
<SCRIPT TYPE="text/JavaScript">

function scanForm(action)
{
var frm=document.forms[0],
fElem=frm.elements['classification'],
rad="",
colours=["RED","WHITE","BLUE"],
i;

for(i=0; i<fElem.length && !fElem.checked; i++)
;
if(i!= fElem.length)
rad=fElem.value;

frm.strCavTop.value=rad+" ";

for(i=0; i<frm.elements.length; i++)
{
if(frm.elements.type=='checkbox')
{
if(action=='classification')
frm.elements.checked=false;

if(rad=='HAT')
{
if(frm.elements.value=='NONE')
frm.elements.checked=true;
else
frm.elements.checked=false;

frm.elements.disabled=true;
}
else
{
frm.elements.disabled=false;

for(var j=0; j<colours.length; j++)
if(frm.elements.value==colours[j] && frm.elements.checked )
if(action=='NONE')
frm.elements.checked=false;
else
{
frm.elements['NONE'].checked=false;
frm.strCavTop.value+="//"+frm.elements.value;
}
}
}
}
}

</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="scanForm()">
<FORM NAME="frmMyForm">

<table border="0" width="100%" height="100%" cellspacing="0"
cellpadding="0">
<tr>
<td>
<INPUT TYPE="text" NAME="strClassTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:right" size="21"><INPUT
TYPE="text" NAME="strCavTop" style="border: 1px solid #FFFFFF;
background-color: #FFFFFF; color:#FF0000; text-align:left" size="50"></td>
</tr>
<tr>
<td valign="top">
<div align="center">
<table>
<tr>
<td align="right">HAT</td>
<td align="left">
<input name="classification" type="radio" value="HAT"
onClick="scanForm(this.name)"><input type="hidden" name="class"></td>
<td>&nbsp;</td>
<td align="right">None</td>
<td>
<input type="checkbox" value="NONE" name="NONE"
OnClick="scanForm(this.checked?this.value:'')"></td>
</tr>
<tr>
<td align="right">SHIRT</td>
<td align="left">
<input name="classification" type="radio" value="SHIRT"
onClick="scanForm(this.name)"></td>
<td>&nbsp;</td>
<td align="right">BLUE</td>
<td>
<input type="checkbox" value="BLUE" name="BLUE" onClick="scanForm()"></td>
</tr>
<tr>
<td align="right">PANTS</td>
<td align="left">
<input name="classification" type="radio" value="PANTS"
onClick="scanForm(this.name)"></td>
<td>&nbsp;</td>
<td align="right">RED</td>
<td>
<input type="checkbox" value="RED" name="RED" onClick="scanForm()"></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left">
&nbsp;</td>
<td>&nbsp;</td>
<td align="right">WHITE</td>
<td>
<input type="checkbox" value="WHITE" name="WHITE"
onClick="scanForm()"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left">
</tr>
</table>
</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

Similar Threads

Filter table rows based on multiple checkboxes value 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Function call from button to automatic 7
How can I arrange a series of radio buttons? 2
Image shifts to the right when export the page to pdf 4
Help needed with thank you message 5
How to have two html audio players on one page? 0
Checking dynamically populated data using ajax with user entered value 5

Members online

Total: 36 (members: 1, guests: 35)
Robots: 321

Forum statistics

Threads
474,266
Messages
2,571,091
Members
48,773
Latest member
Kaybee

Latest Threads

Top