File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes How to Show/Hide text box when select from dropdown list? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to Show/Hide text box when select from dropdown list?" Watch "How to Show/Hide text box when select from dropdown list?" New topic
Author

How to Show/Hide text box when select from dropdown list?

Sultan Altoobi
Ranch Hand

Joined: Dec 11, 2011
Posts: 34
Hi everybody,

I'm trying to do the following:

-when I select other, it should show me textbox to write as bellow:


-when I select Type 1, or 2, or 3, the textbox should hide as follow:


So, the textbox only showed when I select Other, and hided when I select Type 1, 2, and 3.


Help me please...

Thank you.
Sultan Altoobi
Ranch Hand

Joined: Dec 11, 2011
Posts: 34
By the way,

I'm coding website in php.

thanks again.
K. Tsang
Bartender

Joined: Sep 13, 2007
Posts: 1958
    
    7

The show/hide stuff usually done with JavaScript.

One simple way is to set a "onClick" action for the "other" option and trigger the show function. The other options will equally need to trigger the JS by calling the hide function.


K. Tsang JavaRanch SCJP5 SCJD/OCM-JD
Sultan Altoobi
Ranch Hand

Joined: Dec 11, 2011
Posts: 34
Hi again,

Thank you for your response and solutions. Also I read that using jQuery its possible.

I found many codes while I'm googling, but non of them works fine as what I'm looking for!!!

So may you write to me the code that do it in a right way using one of the possible procedures!
I think its a short piece of code.

Thank You.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

Please read NotACodeMill.

jQuery is perfect for this type of thing. Give it a try and post with any problems you are having. But you write the code. We just help you with it.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Sultan Altoobi
Ranch Hand

Joined: Dec 11, 2011
Posts: 34
Bear Bibeault wrote:Please read NotACodeMill.

jQuery is perfect for this type of thing. Give it a try and post with any problems you are having. But you write the code. We just help you with it.



Thats good.

I'll write the code and I'll post here later

Thank you in advance for your response and for mentioning the NotACodeMill.
Sultan Altoobi
Ranch Hand

Joined: Dec 11, 2011
Posts: 34
Hi again,

Sorry I was pussy!!

here is my code, but its not working!!



any help please!?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

Sultan Altoobi wrote:here is my code, but its not working!!


Please read ItDoesntWorkIsUseless and in the future, provide more information.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

jQuery 1.4?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

Two problems with this (and its counterpart) line: $('other').css('display', 'block');

  • Why are you not using .show() and .hide()?
  • What is it that you think that your selector is matching?


  • Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60045
        
      65

    More: on this line:
    It's bad form to mix the styles in with the markup. Move the style info to a <style> element.
    Eric Pascarello
    author
    Rancher

    Joined: Nov 08, 2001
    Posts: 15376
        
        6
    K. Tsang wrote:The show/hide stuff usually done with JavaScript.

    One simple way is to set a "onClick" action for the "other" option and trigger the show function. The other options will equally need to trigger the JS by calling the hide function.


    There is no onclick event on option element.

    Eric
    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    Bear Bibeault wrote:Two problems with this (and its counterpart) line: $('other').css('display', 'block');

  • Why are you not using .show() and .hide()?
  • What is it that you think that your selector is matching?




  • I have tried to use .show() and .hide() , but its not doing it!!


    -I think its matching the value selected from the list using the Id as follow:


    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    Bear Bibeault wrote:More: on this line:
    It's bad form to mix the styles in with the markup. Move the style info to a <style> element.


    Do you mean here I have to do it like this:


    ???
    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    I have tried what you suggusted, but still its not working with me!!

    any other ideas!!
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60045
        
      65

    The most important question I asked is about the selectors. I ask again: do you really think that your selectors are selecting what you think they are selecting? Are you using the correct selector syntax?

    Are you using the JavaScript debuggers built into the browsers? If not, why not? Debugging JavaScript without a debugger is like trying to play concert piano while wearing welding gloves.
    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    Bear Bibeault wrote:The most important question I asked is about the selectors. I ask again: do you really think that your selectors are selecting what you think they are selecting? Are you using the correct selector syntax?

    Are you using the JavaScript debuggers built into the browsers? If not, why not? Debugging JavaScript without a debugger is like trying to play concert piano while wearing welding gloves.


    -I'm not sure if I'm using the the correct selector, this is the syntax I know!

    -and I have no idea about - JavaScript debuggers built into the browsers - I'm not Familiar with JavaScript!!!
    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    Got It^_^

    Thank you Bear Bibeault.
    I appreciate your help

    I forget to put # before other - '#other'

    Now it works fine!

    the complete code with changes:


    Thank You!
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 60045
        
      65



    Now before you do one more line of coding, learn how to use the debugger in the browser! Do it now! It will save you hours and hours of time in the future.
    Sultan Altoobi
    Ranch Hand

    Joined: Dec 11, 2011
    Posts: 34
    Bear Bibeault wrote:

    Now before you do one more line of coding, learn how to use the debugger in the browser! Do it now! It will save you hours and hours of time in the future.


    I read about debugger in the browser and its really intresting!

    Thank you again.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: How to Show/Hide text box when select from dropdown list?
     
    Similar Threads
    noob needs help
    Do I need to copy the functions?
    I need help with "primary and foreign key" in my data migration code
    hide/show textfields in struts form
    JavaSE Swing app minimizes automatically