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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How can I make a drop down menu populate other input fields?

    Lets say I have three input fields

    Taste:
    Color:
    Food Type:

    Now, I want to let a user enter whatever they want. but I also want to give them the option of using a drop down menu, so they could select....

    Apple

    And then Taste automatically fills in with sweet, Color automatically fills in with Red, Food Type automatically fills in with fruit.

    Or they could select

    Yogurt

    And it automatically fills in with tart, white and dairy.

    What is the best way to do this?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Like this?
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="theForm">
    Taste: <input name="taste"/><br/>
    Color: <input name="color"/><br/>
    Type: <input name="type"/><br/>
    <select name="foods">
        <option value=";;">--choose a food--</option>
        <option value="sweet;red;fruit"> Apple </option>
        <option value="savory;brown;meat"> Steak </option>
        <option value="tart;white;dairy"> Yogurt </option>
    </select>
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    form.foods.onchange = function( )
    {
        var parts = this.value.split(/;/g);
        form.taste.value = parts[0];
        form.color.value = parts[1];
        form.type.value  = parts[2];
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Alternative solution:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="theForm">
    Taste: <input name="taste"/><br/>
    Color: <input name="color"/><br/>
    Type: <input name="type"/><br/>
    <select name="foods" id="foods">
        <option>--choose a food--</option>
        <option data-taste="sweet" data-color="red" data-type="fruit"> Apple </option>
        <option data-taste="savory" data-color="brown" data-type="meat"> Steak </option>
        <option data-taste="tart" data-color="white" data-type="dairy"> Yogurt </option>
    </select>
    </form>
    
    <script type="text/javascript">
    (function() {
          document.getElementById("foods").onchange = function() {
              var selectedOption = this.options[this.selectedIndex],
                  form = this.form;
              form.taste.value = selectedOption.getAttribute('data-taste') || '';
              form.color.value = selectedOption.getAttribute('data-color') || '';
              form.type.value  = selectedOption.getAttribute('data-type') || '';
          }
    })();
    </script>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Nov 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Your second example was easier for me to get a mental grasp on, and it worked perfectly. Thank you so much!!!

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    That's what HTML5 custom data attributes are for.


  •  

    Posting Permissions

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