Win a copy of Clojure in Action this week in the Clojure forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Sultan Altoobi
Ranch Hand
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
By the way,

I'm coding website in php.

thanks again.
 
K. Tsang
Bartender
Pie
Posts: 3222
12
Android Java
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Sultan Altoobi
Ranch Hand
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64182
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Sultan Altoobi
Ranch Hand
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 34
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi again,

Sorry I was pussy!!

here is my code, but its not working!!



any help please!?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64182
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64182
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
jQuery 1.4?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64182
83
IntelliJ IDE Java jQuery Mac Mac OS X
  • 0
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
    Pie
    Posts: 64182
    83
    IntelliJ IDE Java jQuery Mac Mac OS X
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 15385
    6
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    I have tried what you suggusted, but still its not working with me!!

    any other ideas!!
     
    Bear Bibeault
    Author and ninkuma
    Marshal
    Pie
    Posts: 64182
    83
    IntelliJ IDE Java jQuery Mac Mac OS X
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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
    Pie
    Posts: 64182
    83
    IntelliJ IDE Java jQuery Mac Mac OS X
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator


    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
    Posts: 34
    • 0
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    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.
    • Post Reply
    • Bookmark Topic Watch Topic
    • New Topic