Jump to content

JS&CSS: Display Fields based on Selection


icoGreg

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!
Link to comment
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

Link to comment
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]
Link to comment
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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.