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 16
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts

    this is a little tricky.. please help

    i have an admin page with lots of dropdown menus.
    on one of them it has lots of colors in but the owner would like to be able to put special car colors in if he needs to.
    so i said i could have the dropdown menu replace itself with a text input if the value was "other".
    first of is this even possible and secondly how would i go about this.
    because of the perl script i have set up i would like the id and name to be the same on the dropdown menu and the text input

  • #2
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Well, we have to see at least a little bit of your code to help you with it. You can use an event type like onclick to create an element in the event handler like this:

    Code:
    var menu = document.getElementById('menuID');
    menu.onclick = function(){this.innerHTML = "<input type='text'>";}
    //this.innerHTML can also be written as menu.innerHTML. this refers to menu
    That is just "starter" code to get you in the right direction. I need to see the document to be able to help any further.
    Last edited by hey; 04-14-2012 at 11:50 PM.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Code:
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    color<br>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select><br><br>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit" onclick="return checkfill()" name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    how would i modify this to do that then

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok i have played with this and all i am getting is when changed it will make the dropdown menu blank and not an input text box.

    Code:
    <head>
    <script type="text/javascript">
    function othercheck()
    {
    
    var menu = document.getElementById('color');
    menu.onclick = function(){this.innerHTML = "<input type='text'>";}
    
    
    
    }
    </script>
    
    
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    color<br>
    <select name="color" onchange="othercheck()" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select><br><br>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    
    </body>

  • #5
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Well, take a closer look at the code. You have two event types, onchange and menu.onclick, we only want onchange. Also, you're setting the innerHTML for the select element which isn't what we want to do. Here is your updated code with my script added. I kept the rest of your code the same, but I don't agree with things like inline styles (the style attribute):

    Code:
    <head>
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    <div id="menu"><p>color</p>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select>
    </div>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    <script type="text/javascript">
    var menu = document.getElementById('menu');
    var color = document.getElementById('color');
    color.onchange = function(){if(this.selectedIndex === 12){var input = document.createElement('input');input.type = 'text';menu.appendChild(input);}};
    </script>
    </body>

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    why go to all the effort of creating a new element every time someone selects "Other" when you can just hide or show one as needs be?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    <div id="menu"><p>color</p>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select>
    <div id="otherdiv" style="display:none">Please specify your preferred color: <input type="text" name="other"/></div>
    </div>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    <script type="text/javascript">
    var menu = document.getElementById('menu');
    var color = document.getElementById('color');
    color.onchange = function(){document.getElementById("otherdiv").style.display=this.value=="Other"?"block":"none"};
    </script>
    </body>
    </html>

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hey View Post
    Well, take a closer look at the code. You have two event types, onchange and menu.onclick, we only want onchange. Also, you're setting the innerHTML for the select element which isn't what we want to do. Here is your updated code with my script added. I kept the rest of your code the same, but I don't agree with things like inline styles (the style attribute):

    Code:
    <head>
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    <div id="menu"><p>color</p>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select>
    </div>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    <script type="text/javascript">
    var menu = document.getElementById('menu');
    var color = document.getElementById('color');
    color.onchange = function(){if(this.selectedIndex === 12){var input = document.createElement('input');input.type = 'text';menu.appendChild(input);}};
    </script>
    </body>
    this one is good but is there a way to replace the original dropdown with this text input

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    <div id="menu"><p>color</p>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select>
    <div id="otherdiv" style="display:none">Please specify your preferred color: <input type="text" name="other"/></div>
    </div>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    <script type="text/javascript">
    var menu = document.getElementById('menu');
    var color = document.getElementById('color');
    color.onchange = function(){if(this.value == "Other"){
    document.getElementById("otherdiv").style.display="block";
    document.getElementById("color").style.display="none";
    	}
    }
    </script>
    </body>
    </html>

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    here is a little
    demo that could
    be greatly improved ....
    if you dont like the
    selections , just type in
    your own. Its a drop down
    that you can type into

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>comboBox</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    </head>
    <body>
    <div>
    <form action="php.php">
    <select name="sel" style="width:180px;" 
    onchange="txt.value=value;"
    >
    <option value="zero">zero</option>
    <option value="one">one</option>
    </select>
    <input name="txt" type="text"  value="zero"
        style="position:relative;
            top:0;
            left:-180px;"
        onblur="sel.options[2] = new Option(value,value);"
    />
    </form>
    </div>
    </body>
    </html>
    Last edited by DaveyErwin; 04-16-2012 at 11:23 PM.

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    
    
    
    <body>
    
    <FORM ACTION="http://www.********.co.uk/cgi-bin/*******update.pl" METHOD="post" ENCTYPE="multipart/form-data" name="mainform" id="mainform">
    
    
    
    <div id="menu"><p>color</p>
    <select name="color" id="color">
        <option value="color">color</option>
        <option value="Red">red</option>
        <option value="Blue">blue</option>
        <option value="Green">green</option>
        <option value="White">white</option>
        <option value="Yellow">yellow</option>
        <option value="Black">black</option>
        <option value="Silver">silver</option>
        <option value="Gray">gray</option>
        <option value="Orange">orange</option>
        <option value="Purple">purple</option>
        <option value="Gold">gold</option>
        <option value="Other">other</option>
    </select>
    <div id="otherdiv" style="display:none">Please specify your preferred color: <input type="text" name="other"/></div>
    </div>
    
    
    <div style="position:absolute;top:700;left:20px;">
    <input type="submit"  name="Submit" value="SUBMIT FORM" style="height: 20px; width: 150px">
    </form>
    </div>
    <script type="text/javascript">
    var menu = document.getElementById('menu');
    var color = document.getElementById('color');
    color.onchange = function(){if(this.value == "Other"){
    document.getElementById("otherdiv").style.display="block";
    document.getElementById("color").style.display="none";
    	}
    }
    </script>
    </body>
    </html>
    chears guys for helping and i am pretty sure this one will be perfect

  • #11
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Quote Originally Posted by xelawho View Post
    why go to all the effort of creating a new element every time someone selects "Other" when you can just hide or show one as needs be?
    Any code I write on this forum is for guidance. It is up to the developer to benchmark and optimize code. There are many ways to do what he asked. You can use innerHTML, create elements (my posted way), hide an input element with styles (your posted way) and more. Hiding/showing an input element instead of creating a new one with JS might be the faster way.
    Last edited by hey; 04-17-2012 at 12:48 AM.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Creating combo boxes with HTML 4 and JavaScript works best if you start with a regular input field and attach a list to it that you can show when the field gets the focus and where you set the input field to the selected entry frim the list.

    Doing that will make it trivial to drop the JavaScript and replace the <ul> tag with a <datalist> tag to convert it to an HTML 5 combo box.

    See http://javascriptexample.net/domform11.php for an example of this approach.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gerble1000 View Post
    chears guys for helping and i am pretty sure this one will be perfect
    ok i have it working great on firefox but it does not change on i.e.
    any ideas

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by gerble1000 View Post
    ok i have it working great on firefox but it does not change on i.e.
    any ideas
    xelawho's code works fine for me in IE9.

    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.

  • #15
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    xelawho's code works fine for me in IE9.
    i am using i.e 8 and so is my customer.
    i kinda need it compatable


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