Jump to content


Photo

JS&CSS: Display Fields based on Selection


  • Please log in to reply
3 replies to this topic

#1 icoGreg

icoGreg
  • New Members
  • Pip
  • Newbie
  • 3 posts

Posted 07 February 2006 - 08:16 PM

I'm using Smarty Templates with CSS and JavaScript. I have the following field which asks the user a yes or no question:

<input name="r1" type="radio" value="Y" onClick="toggleT('divt1','s')">Yes    
<input name="r1" type="radio"  value="N" onClick="toggleT('divt1','h')">No</td>

If the user selects "Yes", I want to send the name of a CSS div and 's' (for 'show') to a JScript Function as follows: (if no is selected, send 'h' for hide)

<head>
{literal}
<script language = "JavaScript">
function toggleT(_w,_h) 
{
    if (document.all) 
    { // is IE
        if (_h=='s') eval("document.all."+_w+".style.display = 'block';");
        if (_h=='h') eval("document.all."+_w+".style.display = 'none';");
    } 
    else 
    { // is NS? 
        if (_h=='s') eval("document.layers['"+_w+"'].display='show';");
        if (_h=='h') eval("document.layers['"+_w+"'].display='hide';");
    }
}
</script>
{/literal}
</head>

If 's' is sent, I want to display the fields contained in the CSS div that I sent (_w), otherwise I want to keep that entire div section hidden. Here is the div section:

<div id="divt1" style="display: none;">
<tr>
   <td rowspan="4" align="right" valign="top" bgcolor="#E1E1E1" class="Redtext style4">blah blah blah</td>
   <td rowspan="4" bgcolor="#E1E1E1" class="Name"> </td>
   <td align="right" valign="top" bgcolor="#E1E1E1" class="Text">Date:</td>
   <td valign="top" bgcolor="#E1E1E1">
   <input name="date" type="text" class="Text" title="Date" value="01/31/2006" size="20" maxlength="30" alt="blank">
   </td>
</tr>
</div>

Currently, the div is being displayed. I want to ONLY display it if the user selects "Yes".

Any help is greatly appreciated. I'm learning much JavaScript lately, and you guys have helped a bunch!

#2 miksel

miksel
  • Members
  • Pip
  • Newbie
  • 9 posts

Posted 07 February 2006 - 11:37 PM

Hi,

You need to take away the <div> from the table. You can't have it there.
Instead you can use the <tr>-tag to hide and show.
Change the <tr>-tag that you had inside the <div>, to this:
<tr id="divt1" style="display: none;">
...

Change the javascript to this to make it work in IE and in FireFox

function toggleT(_w,_h) 
{
    oDiv = document.getElementById(_w);
    oDiv.style.display=(_h=='s')?'block':'none';
}


/micke



#3 icoGreg

icoGreg
  • New Members
  • Pip
  • Newbie
  • 3 posts

Posted 08 February 2006 - 04:12 PM

Thanks! That worked, but now I have another problem...

Inside my div I have multiple tr tags. Adding the script to multiple tr tags is only working on the first tag in the sequence, thus the display is screwed up.


<tr id="divt1" style="display: none;">
   <td rowspan="4" align="right" valign="top" bgcolor="#E1E1E1" class="Redtext style4">blah blah</td>
   <td rowspan="4" bgcolor="#E1E1E1" class="Name"></td>
   <td align="right" valign="top" bgcolor="#E1E1E1" class="Text">
     Date:
   </td>
   <td valign="top" bgcolor="#E1E1E1">
       <input name="date" type="text" class="Text" title="Date" value="01/31/2006" size="20" maxlength="30" alt="blank">
  </td>
</tr>
<tr id="divt1" style="display: none;">
  <td align="right" valign="top" bgcolor="#E1E1E1" class="Text">Lender's Name:</td>
  <td valign="top" bgcolor="#E1E1E1">
  <input name="Lender_Name" type="text" class="Text" title="Lender_Name" value="John Smith" size="20" maxlength="30" alt="blank">
   </td>
</tr>
<tr id="divt1" style="display: none;">
   <td align="right" valign="top" bgcolor="#E1E1E1"><span class="Text">Lender's address: </span></td>
   <td valign="top" bgcolor="#E1E1E1">
   <input name="Lender_Address" type="text" class="Text" title="Lender_Address" value="Lender's Address" size="20" maxlength="30" alt="blank">
   </td>
</tr>


#4 miksel

miksel
  • Members
  • Pip
  • Newbie
  • 9 posts

Posted 08 February 2006 - 11:42 PM

Ahh.. ok, you didn't tell me that you had more then one row...
make the table look like this and keep the script.

<table><tr>
<td>
<input name="r1" type="radio" value="Y" onClick="toggleT('divt1','s')">Yes    
<input name="r1" type="radio"  value="N" selected onClick="toggleT('divt1','h')">No</td>
</tr>
<tr><td>
<table id="divt1" style="display:none;">
    <tr>
   <td rowspan="4" align="right" valign="top" bgcolor="#E1E1E1" class="Redtext style4">blah blah</td>
   <td rowspan="4" bgcolor="#E1E1E1" class="Name"></td>
   <td align="right" valign="top" bgcolor="#E1E1E1" class="Text">
     Date:
   </td>
   <td valign="top" bgcolor="#E1E1E1">
       <input name="date" type="text" class="Text" title="Date" value="01/31/2006" size="20" maxlength="30" alt="blank">
  </td>
</tr>
<tr>
  <td align="right" valign="top" bgcolor="#E1E1E1" class="Text">Lender's Name:</td>
  <td valign="top" bgcolor="#E1E1E1">
  <input name="Lender_Name" type="text" class="Text" title="Lender_Name" value="John Smith" size="20" maxlength="30" alt="blank">
   </td>
</tr>
<tr>
   <td align="right" valign="top" bgcolor="#E1E1E1"><span class="Text">Lender's address: </span></td>
   <td valign="top" bgcolor="#E1E1E1">
   <input name="Lender_Address" type="text" class="Text" title="Lender_Address" value="Lender's Address" size="20" maxlength="30" alt="blank">
   </td>
</tr>
</table></td></tr>

</table>


/micke




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users