JavaScript OnSelect hide/show <tr> [SOLVED]

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Hi, I have a select box where I want to hide a <tr> whenever the current value selected in the <select> box is less than 1 and to show it whenever the current value is greater than 1. But instead it only, does the opposite when I select the 1st one, and the other's don't seem to affect it.

Code: [ Select ]
<html>
<body>
<script type="text/javascript" language="javascript">
<!--
function UpdateSelect()
{
select_value = document.report_form.selection_1.value;
var id = 'hide_this_row';
var obj = '';
obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));

if(select_value < 1)
{
obj.style.display = ( obj.style.display != "none" ) ? "none" : "";//Hide Fields
}
else
{
obj.visibility = "show";//Show Fields
}
}
// -->
</script>


<form method="POST" name="report_form" id="report_form">
<select id="selection_1" name="selection_1" onChange="UpdateSelect();">
<option value="0">TEST HIDE</option>
<option value="1" selected="selected">TEST SHOW</option>
<option value="8">TEST SHOW</option>
<option value="19">TEST SHOW</option>
</select>
<table>
<tr id="hide_this_row">
<td>
     HIDE ME/SHOW ME
</td>
</tr>
</table>
</form>

</body>
</html>
  1. <html>
  2. <body>
  3. <script type="text/javascript" language="javascript">
  4. <!--
  5. function UpdateSelect()
  6. {
  7. select_value = document.report_form.selection_1.value;
  8. var id = 'hide_this_row';
  9. var obj = '';
  10. obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));
  11. if(select_value < 1)
  12. {
  13. obj.style.display = ( obj.style.display != "none" ) ? "none" : "";//Hide Fields
  14. }
  15. else
  16. {
  17. obj.visibility = "show";//Show Fields
  18. }
  19. }
  20. // -->
  21. </script>
  22. <form method="POST" name="report_form" id="report_form">
  23. <select id="selection_1" name="selection_1" onChange="UpdateSelect();">
  24. <option value="0">TEST HIDE</option>
  25. <option value="1" selected="selected">TEST SHOW</option>
  26. <option value="8">TEST SHOW</option>
  27. <option value="19">TEST SHOW</option>
  28. </select>
  29. <table>
  30. <tr id="hide_this_row">
  31. <td>
  32.      HIDE ME/SHOW ME
  33. </td>
  34. </tr>
  35. </table>
  36. </form>
  37. </body>
  38. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • krismeister
  • Graduate
  • Graduate
  • krismeister
  • Posts: 202

Post 3+ Months Ago

your css styles were wrong try:
Code: [ Select ]
if(select_value < 1)

{

obj.style.visibility = "hidden"//Hide Fields

}

else

{

obj.style.visibility = "visible";//Show Fields

}
  1. if(select_value < 1)
  2. {
  3. obj.style.visibility = "hidden"//Hide Fields
  4. }
  5. else
  6. {
  7. obj.style.visibility = "visible";//Show Fields
  8. }
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Nope, did not fix it...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Using "visibility" will leave the layout intact.
In this case it will leave a blank row with no data shown in it.
Code: [ Select ]
if( parseInt(select_value) < 1)
{
    obj.style.visibility = 'hidden';
}
else
{
    obj.style.visibility = 'visible';
}
  1. if( parseInt(select_value) < 1)
  2. {
  3.     obj.style.visibility = 'hidden';
  4. }
  5. else
  6. {
  7.     obj.style.visibility = 'visible';
  8. }


Using "display" will collapse the layout around the element.
In this case, it will cause the lower rows to move up one slot.
Code: [ Select ]
if( parseInt(select_value) < 1)
{
    obj.style.display = 'none';
}
else
{
    obj.style.display = 'table-row'; // or 'table-cell' or a TD element.
}
  1. if( parseInt(select_value) < 1)
  2. {
  3.     obj.style.display = 'none';
  4. }
  5. else
  6. {
  7.     obj.style.display = 'table-row'; // or 'table-cell' or a TD element.
  8. }
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Man, I wish I had a portable joebert on my desk. :)

It works, thanks again.
  • rabindra
  • Born
  • Born
  • rabindra
  • Posts: 2

Post 3+ Months Ago

I was wondering if this can be made to hide/show multiple rows?

I am new to html/JavaScript and your code really helped in doing a form that needed this kind of functionality. However requirements have changed and I want to show/hide more than one row.

Can you help please?

Thanks.

PolishHurricane wrote:
Man, I wish I had a portable joebert on my desk. :)

It works, thanks again.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Did you trying using it with a <div>, in my opinion the code is kind of cruddy because you need to use invalid HTML with a "name" on your form element for it to work. I'm not at home atm, but maybe I can find some better code later if you still haven't figured it out.
  • rabindra
  • Born
  • Born
  • rabindra
  • Posts: 2

Post 3+ Months Ago

I managed a workaround by editing the code for single row hide though I believe it requires some fine tuning, at the moment it does work for me-

Code: [ Select ]
function HideShowQuoteFields(val,thisname)
    {
        select_value = val.value;
        var trs=document.getElementsByTagName('TR');
        for (i=0;i<trs.length;i++){
           
            if(trs[i].getAttribute(thisname)){
                //alert('Field name is '+trs[i].getAttribute(thisname));
                if(trs[i].getAttribute(thisname) == 'revision'){
                    if( select_value == 'Revision'){
                        trs[i].style.display = 'table-row'; // or 'table-cell' or a TD element.
                    }
                    else
                    {
                        trs[i].style.display = 'none';
                    }
                }   
                else if(trs[i].getAttribute(thisname) == 'new'){
                    if( select_value == 'New'){
                        trs[i].style.display = 'table-row'; // or 'table-cell' or a TD element.
                    }
                    else
                    {
                        trs[i].style.display = 'none';
                    }
                }
            }  
        }
    }
 
  1. function HideShowQuoteFields(val,thisname)
  2.     {
  3.         select_value = val.value;
  4.         var trs=document.getElementsByTagName('TR');
  5.         for (i=0;i<trs.length;i++){
  6.            
  7.             if(trs[i].getAttribute(thisname)){
  8.                 //alert('Field name is '+trs[i].getAttribute(thisname));
  9.                 if(trs[i].getAttribute(thisname) == 'revision'){
  10.                     if( select_value == 'Revision'){
  11.                         trs[i].style.display = 'table-row'; // or 'table-cell' or a TD element.
  12.                     }
  13.                     else
  14.                     {
  15.                         trs[i].style.display = 'none';
  16.                     }
  17.                 }   
  18.                 else if(trs[i].getAttribute(thisname) == 'new'){
  19.                     if( select_value == 'New'){
  20.                         trs[i].style.display = 'table-row'; // or 'table-cell' or a TD element.
  21.                     }
  22.                     else
  23.                     {
  24.                         trs[i].style.display = 'none';
  25.                     }
  26.                 }
  27.             }  
  28.         }
  29.     }
  30.  


The TRs to hide should have same name
Code: [ Select ]
 
                                 <tr class="white" nameit="revision">
                    <td valign='top' align='right'>Renewal Comments </td>
                    <td class="form_text"><textarea name="Renewal_Comments" rows=4 cols=60 ></textarea></td>
                </tr>
                                 <tr class="white" nameit="revision">
                    <td valign='top' align='right'>comments &nbsp;&nbsp;<a href="javascript&#058;void(0);" onmouseover="Tip('For multiple systems a spreadsheet can be uploaded at the end of this page', ABOVE,true,CENTERMOUSE,true,OFFSETY,20,BORDERCOLOR, '#dd00aa',FONTSIZE, '10pt',WIDTH,200)" onmouseout="UnTip()"><img src="/images/view_info.gif" border="0"></a></td>
                    <td class="form_text"><textarea name="comments" rows=4 cols=60 ></textarea></td>
                </tr>
 
 
 
  1.  
  2.                                  <tr class="white" nameit="revision">
  3.                     <td valign='top' align='right'>Renewal Comments </td>
  4.                     <td class="form_text"><textarea name="Renewal_Comments" rows=4 cols=60 ></textarea></td>
  5.                 </tr>
  6.                                  <tr class="white" nameit="revision">
  7.                     <td valign='top' align='right'>comments &nbsp;&nbsp;<a href="javascript&#058;void(0);" onmouseover="Tip('For multiple systems a spreadsheet can be uploaded at the end of this page', ABOVE,true,CENTERMOUSE,true,OFFSETY,20,BORDERCOLOR, '#dd00aa',FONTSIZE, '10pt',WIDTH,200)" onmouseout="UnTip()"><img src="/images/view_info.gif" border="0"></a></td>
  8.                     <td class="form_text"><textarea name="comments" rows=4 cols=60 ></textarea></td>
  9.                 </tr>
  10.  
  11.  
  12.  


And finally the radio button to call hide/show function-

Code: [ Select ]
 
<tr class="white">
 
                    <td valign='top' align='right'>Quote Type</td>
                    <td class="form_text">
                    <input type="radio" id="Quote_Type" name="Quote_Type"  onClick="HideShowQuoteFields(this,'nameit');" value="New"  > New
                    <input type="radio" id="Quote_Type" name="Quote_Type"  onClick="HideShowQuoteFields(this,'nameit');" value="Revision"   > Revision
                    </td>
                </tr>
 
 
  1.  
  2. <tr class="white">
  3.  
  4.                     <td valign='top' align='right'>Quote Type</td>
  5.                     <td class="form_text">
  6.                     <input type="radio" id="Quote_Type" name="Quote_Type"  onClick="HideShowQuoteFields(this,'nameit');" value="New"  > New
  7.                     <input type="radio" id="Quote_Type" name="Quote_Type"  onClick="HideShowQuoteFields(this,'nameit');" value="Revision"   > Revision
  8.                     </td>
  9.                 </tr>
  10.  
  11.  


Any comments/suggestions are welcomed.


PolishHurricane wrote:
Did you trying using it with a <div>, in my opinion the code is kind of cruddy because you need to use invalid HTML with a "name" on your form element for it to work. I'm not at home atm, but maybe I can find some better code later if you still haven't figured it out.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: Bogey and 110 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.