Error in Code

Discussion in 'JavaScript' started by Fatima, Feb 19, 2007.

  1. #1
    THis Code not working..?
    Actually i need to do is tht.... when a user select "Special" from the select box then the visibility of a Row with a textfield should ON or row should visible with a Textfield which shows the option to the user for write details about tht Special Offer ......
    Error :
    THe row not hiding so far whether the user select Special option from the select box or not its still right there ......and i dont need to do tht .....i need to hide it 2 when he use to choose the different options rather thann Special
    one ...

    
    <html>
    <head>
    <STYLE TYPE="text/css">
    #dsply {visibility:hidden}
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
    // toggle visibility of a main group spans
    function toggle(sel,value,id) {
        var visSetting = (sel==value) ? "visible" : "hidden"
        document.getElementById(id).style.visibility = visSetting
    }
    </script>
    </head>
    <body>
    
     <tr bgcolor="#999999" >
        <td height="36">
    	<div align="center" class="text">
          <div align="left">Product Status : </div></div></td>
        <td>
          <div align="left">
    	  <select name="status1" size="1" class="FormsButtons"  style="font-family: Verdana; font-size:7pt; 
    
    letter-spacing: -1pt; width: 180; float:left " onchange="toggle(this.value,'Special','dsply')">
    	  <option value="" selected="selected">---&nbsp;&nbsp; Select Product Status &nbsp;&nbsp;--- </option>
    		<option value="Featured">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; Featured</option>
    		<option value="Special">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; Special</option>
    		<option value="New">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; New Release</option>		
    	</select>
    	<span id="dsply"><input name="Offer" type="text" class="FormsButtons" id="Offer" style="font-family: Verdana; 
    
    font-size:7pt; letter-spacing: -1pt; width: 140; float:left " value="Offer details ?"/></span>
    	  </div> 
    
    	  </td>
      </tr>
    
    <span id="dsply">
        <tr bgcolor="#CCCCCC" >
        <td height="36">
    	<div align="center" class="text">
          <div align="left">Product Special Offer : </div></div></td>
        <td>
          <div align="left">
    	  <input name="Offer" type="text" class="FormsButtons" id="Offer" style="font-family: Verdana; font-size:7pt; 
    
    letter-spacing: -1pt; width: 140; float:left " value="Offer details ?"/>
    	  </div> 
    
    	  </td>
      </tr>
      </span>
    </body>
    </html>
    
    Code (markup):
    ur kind help will be appreciable ....THanks
     
    Fatima, Feb 19, 2007 IP
  2. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #2
    Seems to be working just fine for me. The hidden option appears when I select "special" and hides when I select something else.
     
    nico_swd, Feb 19, 2007 IP
  3. Fatima

    Fatima Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    
    <html>
    <head>
    <STYLE TYPE="text/css">
    #dsply {visibility:hidden}
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
    // toggle visibility of a main group spans
    function toggle(sel,value,id) {
        var visSetting = (sel==value) ? "visible" : "hidden"
        document.getElementById(id).style.visibility = visSetting
    }
    </script>
    </head>
    <body>
    
     <tr bgcolor="#999999" >
        <td height="36">
    	<div align="center" class="text">
          <div align="left">Product Status : </div></div></td>
        <td>
          <div align="left">
    	  <select name="status1" size="1" class="FormsButtons"  style="font-family: Verdana; font-size:7pt; 
    
    letter-spacing: -1pt; width: 180; float:left " onchange="toggle(this.value,'Special','dsply')">
    	  <option value="" selected="selected">---&nbsp;&nbsp; Select Product Status &nbsp;&nbsp;--- </option>
    		<option value="Featured">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; Featured</option>
    		<option value="Special">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; Special</option>
    		<option value="New">&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp; New Release</option>		
    	</select>
    	  </div> 
    
    	  </td>
      </tr>
    
    Code (markup):
    !!!!!!!!!!!!!!!!!!!!!!!

    I need to hide tht row.....Which still not hiding:

    
    !!!!!!!!!!!!!!!!!!!!!!!
    
    <span id="dsply">
        <tr bgcolor="#CCCCCC" >
        <td height="36">
    	<div align="center" class="text">
          <div align="left">Product Special Offer : </div></div></td>
        <td>
          <div align="left">
    	  <input name="Offer" type="text" class="FormsButtons" id="Offer" style="font-family: Verdana; font-size:7pt; 
    
    letter-spacing: -1pt; width: 140; float:left " value="Offer details ?"/>
    	  </div> 
    
    	  </td>
      </tr>
      </span>
    
    !!!!!!!!!!!!!!!!!!!!!!!!!!!
    
    Code (markup):
     
    Fatima, Feb 19, 2007 IP