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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help - Simple Form Dropdown that Opens a Text input

    Hey everyone. Been racking my brain all day trying to figure out how to duplicate this code with the limited javascript knowledge I have been trying to learn.

    This code is a Dropdown menu of Yes or No, than a Select button that Opens up a Text Input directly below the dropdown. So far, It works great. My problem is I need at least two of these on the same page and I do not know how to go about it. I have tried changing values to accommodate adding another on the same form, but than both stop working. Can someone Please HELP!

    Thank you in advance.

    Code:
    <html>
    <head>
    <SCRIPT language="javascript">
    function add(type) {
     
        //Create an input type dynamically.
        var element = document.createElement("input");
     
        //Assign different attributes to the element.
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);
        element.setAttribute("id", type);
     
        var foo = document.getElementById("fooBar");
     
        //Append the element in page (in span).
        foo.appendChild(element);
     
    }
    </SCRIPT>
    </head>
     
    <body>
    <label>
    <SELECT name="element">
    <OPTION value="text" name="refer_yes" id="refer_yes">Yes</OPTION>
    <OPTION value="text" name="refer_no" id="refer_no">No</OPTION>
    </SELECT>
    
    <INPUT type="button" value="Select" onclick="add(document.forms[0].element.value='')"/>
    </label>
    <span id="fooBar">&nbsp;</span>
    </body>
    <html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Unless you need to add dozens of text fields in this way, you are *WAY* overcomplicating this by doing a dynamic add.

    It's so much simpler to just have the <input>s in place already with style="display: none;" and then un-hide them as needed.

    And you wouldn't want to use that code to add dozens of fields, because as written you would be assigning the same id to multiple fields, which is a no-no.

    And not to ask a dumb question,but... Why does it matter which <option> the user chooses??? You will add exactly the same thing, no matter what.
    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
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, First thanks for your help.
    I will try and utilize the display none.

    I am helping a friend create a nice site as a favor, and they have an imagination out of this world on what they want to see. I don't want to disappoint lol. Thought this was the only way to go about it.

    Thanks again. I really appreciate it.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Will something like this work?
    Code:
    <div id="foobar" style="display: none;">
    Please enter your zamboni number: <input type="text" name="zamboni" >
    </div>
    <input type="button" value="Select"
           onclick="document.getElementById('foobar').style.display='block';">
    ...
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I really am curious why you needed to look at the value of the <select> as part of that code, since the value was that same for both <option>s.
    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.

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that works great. Jeez, Im a jerk. I didn't even think of that, that should work much much better. I have actually used something like that in the past as well. Didn't even occur to me to use that style.

    He asked me to use dropdowns, I was just trying to give him the results he was describing to me. But his way is garbage.

    Thanks again. I really do appreciate the quick help.


  •  

    Posting Permissions

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