icoGreg Posted February 7, 2006 Share Posted February 7, 2006 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 https://forums.phpfreaks.com/topic/3348-jscss-display-fields-based-on-selection/ Share on other sites More sharing options...
miksel Posted February 7, 2006 Share Posted February 7, 2006 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 https://forums.phpfreaks.com/topic/3348-jscss-display-fields-based-on-selection/#findComment-11446 Share on other sites More sharing options...
icoGreg Posted February 8, 2006 Author Share Posted February 8, 2006 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 https://forums.phpfreaks.com/topic/3348-jscss-display-fields-based-on-selection/#findComment-11474 Share on other sites More sharing options...
miksel Posted February 8, 2006 Share Posted February 8, 2006 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 https://forums.phpfreaks.com/topic/3348-jscss-display-fields-based-on-selection/#findComment-11483 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.