Member Avatar for FreddieBambino

Right. Im a php developer and I have never taken the time to study Javascript, and it always gives me a hard time.

I have a drop down menu with 2 options. The default option is just Choose Payment. If I go to credit card, then nothing is supposed to happen, but if I go to other, a textbox should appear where I can write additional information. The code I have now works fine, the only problem is, that when the page loads, the text box appears on default, how can I have it hidden by default, and only shown when it is set to other. Thanks.
Here is the code.

<HEAD>
   <script type="text/javascript">  
     
   function toggleElement(sel1, element1) {  
     
     element1 = document.frm1.elements[element1];  
     //alert(element1.value);  
     if (sel1.value == 'others') {  
     
       element1.style.display = 'inline';  
   
    }  
     else {  
     element1.value = ''; // input text will be empty  
       element1.style.display = 'none'; // hide text element  
     }  
     
     return;  
  }  
 </script>  
</HEAD>


<BODY>
   <form name="frm1" >  
     
   <select name="city" id="city" onchange="toggleElement(this, 'txt1')">  
    <option value="patna">Choose Payment</option>  
    <option value="mumbai">Credit Card</option>  
    <option value="others">Others</option>  
   </select>  
   <input type="text" name="txt1" id="txt1" value="" /> any text  
      
   </form>  

</body>
  • 2 Contributors
  • 3 Replies
  • 115 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hielo

Recommended Answers

All 3 Replies

Member Avatar for hielo 
<HEAD>
   <script type="text/javascript">  
     
   function toggleElement(sel1, element1) {  
     
     element1 = document.frm1.elements[element1];  
     //alert(element1.value);  
     if (sel1.value == 'others') {  
     
       element1.style.display = 'inline';  
   
    }  
     else {  
     element1.value = ''; // input text will be empty  
       element1.style.display = 'none'; // hide text element  
     }  
     
     return;  
  }  
  
  window.onload=function(){
      toggleElement(document.getElementById('city'), 'txt1')
  }
 </script>  
</HEAD>


<BODY>
   <form name="frm1" >  
     
   <select name="city" id="city" onchange="toggleElement(this, 'txt1')">  
    <option value="patna">Choose Payment</option>  
    <option value="mumbai">Credit Card</option>  
    <option value="others" selected="selected">Others</option>  
   </select>  
   <input type="text" name="txt1" id="txt1" value="" /> any text  
      
   </form>  

</body>
commented: Very helpful comment he made to me about Javascript +1
Member Avatar for FreddieBambino

Right on the spot, thanks a bunch mate. Rated you up.

Member Avatar for hielo

Glad to help!

Regards,
Hielo

PS: Don't forget to mark the thread as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.