Web Analytics Made Easy -
StatCounter When option in select field is chosen, make input appear - CodingForum

Announcement

Collapse
No announcement yet.

When option in select field is chosen, make input appear

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • When option in select field is chosen, make input appear

    This is pretty simple but I need a script that when an option is selected in a drop-down box (select tag) an input tag appears and I am still pretty basic at javascript.

    I was using a script that worked fine but because the variable of the option that makes the script go required the "|" character, it interfered with a PHP script in my document and screwed everything up. Lame. Any help would be so much appreciated.

    Chris

  • #2
    You do not make it clear whether you want the input box to appear if any option is selected or only if one particular option is selected. If you want the former remove the lines in blue.


    Code:
    <select id = "fruits" onchange = "makeBox()">
    <option value = "0" selected>Select a fruit&nbsp&nbsp </option>
    <option value = "1"> Apple<br>
    <option value = "2"> Pear<br>
    <option value = "3"> Peach<br>
    <option value = "4"> Plum<br>
    <option value = "5"> Strawberry<br>
    <option value = "6"> Banana<br>
    </select>
    <br><br>
    
    <div id = "inputBox"></div>
    
    <script type = "text/javascript">
    function makeBox() {
    var a = "<input type = 'text' name = 'box1' id = 'box1'>"
    [COLOR="Blue"]if (document.getElementById("fruits").value==1) {
    [/COLOR]document.getElementById("inputBox").innerHTML = a;
    [COLOR="Blue"]}[/COLOR]
    }
    </script>

    "There is hardly anything in the world that some man cannot make a little worse and sell a little cheaper, and the people who consider price only are this man's lawful prey." John Ruskin

    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.

    Comment


    • #3
      Thanks so much. The answer to your question is YES only appear when a single option is chosen. So therefore the only problem with that script above is that the input box doesn't disappear when you select a different option after you've chosen the option that makes the input box appear.

      Comment


      • #4
        Surely you could have worked out how to deal with that?

        Code:
        <script type = "text/javascript">
        function makeBox() {
        var a = "<input type = 'text' name = 'box1' id = 'box1'>"
        if (document.getElementById("fruits").value==1) {
        document.getElementById("inputBox").innerHTML = a;
        }
        else {
        document.getElementById("inputBox").innerHTML = "";
        }
        }
        </script>

        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.

        Comment


        • #5
          Philip can you help me with this:

          I have an option form and for every option i want to create multi inputs (checkbox).

          I used your code, it works, but i can only add 1 input. How can i add more inputs for the selected option?

          Thank you!

          This is what i did
          <select id = "lucrari" onchange = "makeBox()">
          <optgroup label="Bucatarie">
          <option value="masinaspalatvase" > Masina de spalat vase
          </option>
          <option value="plita">Plita</option>

          </optgroup>
          <optgroup label="Spatii publice">
          <option value="grupsanitar">Grup Sanitar</option>
          <option value="Sala mese">Sala mese</option>
          </optgroup>
          </select>
          <br><br>

          <div id = "inputBox"></div>
          <script type = "text/javascript">
          function makeBox() {
          var a = "<input type = 'checkbox' name = 'box1' id = 'box1'>A fost reglata concentratia de detergent"
          if (document.getElementById("lucrari").value=="masinaspalatvase" ) {
          document.getElementById("inputBox").innerHTML = a;
          }
          else {
          document.getElementById("inputBox").innerHTML = "";
          }
          }
          </script>

          Originally posted by Philip M View Post
          Surely you could have worked out how to deal with that?

          Code:
          <script type = "text/javascript">
          function makeBox() {
          var a = "<input type = 'text' name = 'box1' id = 'box1'>"
          if (document.getElementById("fruits").value==1) {
          document.getElementById("inputBox").innerHTML = a;
          }
          else {
          document.getElementById("inputBox").innerHTML = "";
          }
          }
          </script>

          Comment


          • #6
            Are you trying to do something like this?
            See: http://www.javascriptsource.com/form...down-list.html

            Changing from text input to checkboxes is super easy.

            Comment


            • #7
              yes, something like when selecting "Plane".

              Do you think if i can implement an "add to cart" ?

              What i want to do:
              - have 10-12 options, for every option 10-20 inputs.
              - when i select the certain inputs for an option i want to add to cart so in the end when i select several options i'll have a list with options and inputs.

              I need this for a service plan.

              Thank you for your reply!

              Comment


              • #8
                Code:
                <!DOCTYPE html>
                <html>
                <head>
                <style type="text/css">
                div#features div { display: none; }
                </style>
                </head>
                <body>
                <form id="theForm">
                    <select name="locations">
                        <option value="">--choose one--</option>
                        <optgroup label="kitchen">
                            <option value="dishwasher"> Dishwasher </option>
                            <option value="grill"> Grill </option>
                        </optgroup>
                        <optgroup label="Public spaces">
                           <option value="bathroom"> Bathroom </option>
                           <option value="diningroom"> Dining Room</option>
                        </optgroup>
                    </select>
                <div id="features">
                    <div id="dishwasher">
                        Dishwasher features:
                        <label><input type="checkbox" name="dishwasherSpeeds" value="2"> 2 speeds </label>
                        <label><input type="checkbox" name="dishwasherDry" value="heated"> Heated drying </label>
                        <label><input type="checkbox" name="dishwasherPrerinse" value="pre"> Pre-rinse </label>
                    </div>
                    <div id="grill">
                        Grill features:
                        <label><input type="checkbox" name="grillBurners" value="2"> 2 burners </label>
                        <label><input type="checkbox" name="grillFan" value="yes"> Has fan </label>
                    </div>
                    <div id="bathroom">
                        Bathroom features:
                        <label><input type="checkbox" name="bathroomSinks" value="2"> 2 sinks </label>
                        <label><input type="checkbox" name="bathroomBidet" value="yes"> Bidet </label>
                    </div>
                    <div id="diningroom">
                        Dining Room features:
                        <label><input type="checkbox" name="diningroomChandelier" value="yes"> Chandelier </label>
                    </div>
                </div>
                </form>
                <script type="text/javascript">
                var form = document.getElementById("theForm");
                form.locations.onchange = locationChange;
                
                function locationChange( )
                {
                    var choice = this.value;
                    var divs = document.getElementById("features").getElementsByTagName("div");
                    for ( var d = 0; d < divs.length; ++d )
                    {
                        var div = divs[d];
                        // OPTIONAL:  Clear all checkboxes when a different location is chosen
                        var inps = div.getElementsByTagName("input");
                        for ( var i = 0; i < inps.length; ++i )
                        {
                            inps[i].checked = false;
                        }
                        // END OF OPTIONAL
                        div.style.display = ( div.id == choice ) ? "block" : "none";
                    }
                }
                </script>
                </body>
                </html>
                Try that demo.

                What is the right translation of "lucrari"? Bing says "artworks" but somehow I don't think that is right. I think the rest are right.
                Be yourself. No one else is as qualified.

                Comment


                • #9
                  Originally posted by jmrker View Post
                  Are you trying to do something like this?
                  See: http://www.javascriptsource.com/form...down-list.html

                  Changing from text input to checkboxes is super easy.
                  That works, but it is clumsy code, depending on the option number to choose which to display. And then, on top of that, needing a separate IF for each option. Ugh.
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    And given the stated use of this, I think you want to OMIT the part I marked as OPTIONAL.
                    Be yourself. No one else is as qualified.

                    Comment


                    • #11
                      lucrari is maintenance.

                      What you gave me is exactly what i was looking for.

                      But i have the same question as i said above: Do you think it's possible to implement an add to cart button for every option?

                      Thank you for the replies!
                      Last edited by Sabu; Aug 2, 2012, 05:29 PM.

                      Comment


                      • #12
                        Sure. But given the style of the page, I would use an "Add this to cart" *CHECKBOX*.

                        The problem with a button is the user expects to see something change RIGHT NOW.

                        Since you are allowing them to pick and choose MULTIPLE options and multiple checkboxes, I would think just adding another checkbox would be the way to do it.

                        What about if, then they show an item from the <select>, an *ALREADY-CHECKED* checkbox shows up in those individual <div>s? In other words, "You chose BATHROOM from the <select> so we *assume* you want to purchase that service." The user could still change his/her mind by UN-checking that checkbox.

                        Hmmm???
                        Be yourself. No one else is as qualified.

                        Comment


                        • #13
                          Yes, it's a good idea.

                          Can you help me with an example of that code?

                          Comment


                          • #14
                            Like this:
                            Code:
                            <!DOCTYPE html>
                            <html>
                            <head>
                            <style type="text/css">
                            div#features div { display: none; }
                            </style>
                            </head>
                            <body>
                            <form id="theForm">
                                <select name="locations">
                                    <option value="">--choose one--</option>
                                    <optgroup label="kitchen">
                                        <option value="dishwasher"> Dishwasher </option>
                                        <option value="grill"> Grill </option>
                                    </optgroup>
                                    <optgroup label="Public spaces">
                                       <option value="bathroom"> Bathroom </option>
                                       <option value="diningroom"> Dining Room</option>
                                    </optgroup>
                                </select>
                            <div id="features">
                                <div id="dishwasher">
                                    <label><input type="checkbox" name="addToCart" value="dishwasher"/>
                                        Add dishwasher maintenance </label><br/>
                                    Dishwasher features:
                                    <label><input type="checkbox" name="dishwasherSpeeds" value="2"> 2 speeds </label>
                                    <label><input type="checkbox" name="dishwasherDry" value="heated"> Heated drying </label>
                                    <label><input type="checkbox" name="dishwasherPrerinse" value="pre"> Pre-rinse </label>
                                </div>
                                <div id="grill">
                                    <label><input type="checkbox" name="addToCart" value="grill"/>
                                        Add grill maintenance </label><br/>
                                    Grill features:
                                    <label><input type="checkbox" name="grillBurners" value="2"> 2 burners </label>
                                    <label><input type="checkbox" name="grillFan" value="yes"> Has fan </label>
                                </div>
                                <div id="bathroom">
                                    <label><input type="checkbox" name="addToCart" value="bathroom"/>
                                        Add bathroom maintenance </label><br/>
                                    Bathroom features:
                                    <label><input type="checkbox" name="bathroomSinks" value="2"> 2 sinks </label>
                                    <label><input type="checkbox" name="bathroomBidet" value="yes"> Bidet </label>
                                </div>
                                <div id="diningroom">
                                    <label><input type="checkbox" name="addToCart" value="diningroom"/>
                                        Add dining room maintenance </label><br/>
                                    Dining Room features:
                                    <label><input type="checkbox" name="diningroomChandelier" value="yes"> Chandelier </label>
                                </div>
                            </div>
                            </form>
                            <script type="text/javascript">
                            var form = document.getElementById("theForm");
                            form.locations.onchange = locationChange;
                            
                            function locationChange( )
                            {
                                var choice = this.value;
                                var divs = document.getElementById("features").getElementsByTagName("div");
                                for ( var d = 0; d < divs.length; ++d )
                                {
                                    var div = divs[d];
                                    div.style.display = "none";
                                }
                                // now process the chosen div:
                                div = document.getElementById(choice);
                                div.style.display = "block";
                                div.getElementsByTagName("input")[0].checked = true;
                            }
                            </script>
                            </body>
                            </html>
                            Be yourself. No one else is as qualified.

                            Comment


                            • #15
                              Yes, something like that.

                              But how will they look when i group them in a shopping list, bag, etc?

                              Comment

                              Working...
                              X