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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    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'>"
    if (document.getElementById("fruits").value==1) {
    document.getElementById("inputBox").innerHTML = a;
    }
    }
    </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

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    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>

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

    Quote 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>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    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.
    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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Quote 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.
    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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    And given the stated use of this, I think you want to OMIT the part I marked as OPTIONAL.
    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.

  • #11
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 08-02-2012 at 11:29 PM.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    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???
    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.

  • #13
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, it's a good idea.

    Can you help me with an example of that code?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    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>
    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.

  • #15
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, something like that.

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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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