Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop Down Menu - Input Boxes

    Hello everyone, how would I make something like if a user picks a different option from the drop down menu, each input box will be different. Example:

    Code:
    <option value="" selected="Select A Car"></option>
                            <option value="audi">Audi</option>
          <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required">
    BUT if for example the user DOES NOT pick "Audi" and they pick BMW, the input will be like this:

    Code:
    <option value="bmw">BMW</option>
          <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required">
    So each option will show a different input box. How do I do this?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,999
    Thanks
    15
    Thanked 234 Times in 234 Posts
    That looks like a job for javascript. PhP can build all the inputs and dropdowns, javascript would have no problem placing the dropdown choices in the inputs. Javascript could read all the choices from many types of inputs, building an array of them, putting the array in a hidden input, and letting the array be posted to PhP, where the whole array could be used by PhP.

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Bare in mind, you can't have option/inputs together like that. Options are children of select boxes, so you have to wrap those options within selects, with the inputs outside.

    But yah, if you want dynamic action, you need Javascript. Remember that PHP is server side. When a user requests a page, PHP processes it and does w/e and sends that information back to the client. It then has no further interaction until the next request. Thus, changing the page ad infinitum would make no difference to the PHP. Javascript on the other hand works on the client side... it makes dynamic changes to the client's view, without ever needing to interact with the server.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    This is an example only of how you would go about this:-

    Code:
    <select id = "mysel" onchange = "showbox()">
    <option value = "">Chose a car ...</option>
    <option value = "Audi">Audi</option>
    <option value = "BMW">BMW</option>
    </select>
    <br><br>
    
    <span id = "span1" style="display:none">Audi <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required"></span>
    <span id = "span2" style="display:none">BMW <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required"></span>
    
    
    <script type="text/javascript">
    function showbox() {
    document.getElementById("span1").style.display="none";
    document.getElementById("span2").style.display="none";
    
    var val = document.getElementById("mysel").value;
    if (val == "Audi") {
    document.getElementById("span1").style.display="block";
    }
    if (val == "BMW") {
    document.getElementById("span2").style.display="block";
    }
    
    }
    
    </script>
    If there are many options the code can be simplified.


    "If you think education is expensive, try ignorance." - Derek Bok (1930-), Harvard University President

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    TheMightyEddy (06-26-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    This is an example only of how you would go about this:-

    Code:
    <select id = "mysel" onchange = "showbox()">
    <option value = "">Chose a car ...</option>
    <option value = "Audi">Audi</option>
    <option value = "BMW">BMW</option>
    </select>
    <br><br>
    
    <span id = "span1" style="display:none">Audi <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required"></span>
    <span id = "span2" style="display:none">BMW <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required"></span>
    
    
    <script type="text/javascript">
    function showbox() {
    document.getElementById("span1").style.display="none";
    document.getElementById("span2").style.display="none";
    
    var val = document.getElementById("mysel").value;
    if (val == "Audi") {
    document.getElementById("span1").style.display="block";
    }
    if (val == "BMW") {
    document.getElementById("span2").style.display="block";
    }
    
    }
    
    </script>
    If there are many options the code can be simplified.


    "If you think education is expensive, try ignorance." - Derek Bok (1930-), Harvard University President
    Okay mind showing me the many options code? So what if I have Audi, BMW, Mercedes, Toyota, Honda, Ferrari?

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by TheMightyEddy View Post
    Okay mind showing me the many options code? So what if I have Audi, BMW, Mercedes, Toyota, Honda, Ferrari?
    Surely you can manage that yourself? Six options is not what I would call "many". Simply add the additional options to the select list, add additional spans containing the textboxes, and in the script change the display of the span to block if the value of the select is "Toyota" or wahtever.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Surely you can manage that yourself? Six options is not what I would call "many". Simply add the additional options to the select list, add additional spans containing the textboxes, and in the script change the display of the span to block if the value of the select is "Toyota" or wahtever.
    I know I'm just saying. If I had 50 car brands, how would the layout be? Can you just like number them or something simple?

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Actually, nevermind, I got it. Also, how would I create a button that would save their inputted info into a MySQL database table called "audi" for the audi field?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    If you had 50 car brands there are several ways in which the code could be materially shortened/simplified. But I don't have the time to write code speculatively. One common outcome is that the OP says "Oh, but I have now thought of something else that I want".

    I don't really understand your question about a button. If you are working with MySQL ask in the appropriate forum. But your questions suggest to me that you are trying to run before you can walk, and attempting something beyond your current coding capabilities. As this would seem to be a commercial application my advice would be the same as if my car was giving trouble - pay a professional to fix it.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •