Jump to content

Archived

This topic is now archived and is closed to further replies.

icoGreg

JS&CSS: Display Fields based on Selection

Recommended Posts

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

[code]
<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>
[/code]

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)

[code]
<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>
[/code]

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:

[code]
<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>
[/code]

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!

Share this post


Link to post
Share on other sites
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:
[code]
<tr id="divt1" style="display: none;">
...
[/code]

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

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


/micke

Share this post


Link to post
Share on other sites
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.


[code]
<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>
[/code]

Share this post


Link to post
Share on other sites
Ahh.. ok, you didn't tell me that you had more then one row...
make the table look like this and keep the script.

[code]
<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>

[/code]

/micke

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.