www.webdeveloper.com
Results 1 to 4 of 4

Thread: Add a dynamic text field??

  1. #1
    Join Date
    Jun 2014
    Posts
    10

    Add a dynamic text field??

    Hey I was wondering if someone can clue me in on what I'm trying to do.
    I have a select box in html that looks like this:
    Code:
    <select id="selectBox" onchange="changeFunc();">
    		<option value = "0">Other</option>
    		<option selected = "1">GSD AMS</option>
    		<option value = "2">GSD APJ</option>
    		<option value = "3">GSD EMEA</option>
    		<option value = "4">GSD Customer Solution Center</option>
    		<option value = "5">GSD Supply Chain</option>
    		<option value = "6">Delivery Readiness</option>
    		<option value = "7">Business Process, Customer Experience and Quality</option>
    		<option value = "8">Business Operations</option>
    		<option value = "9">GSD Engineering Resolution</option>
    		<option value = "10">GSD Escalation Management</option>
       		</select>
    and it calls a Javascript like this:
    Code:
    <script type="text/javascript">
    
    	function changeFunc() {
    	var selectBox = document.getElementById("selectBox");
    	var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    	if(selectedValue < 1)
    	{
                      what I'm trying do is when the selectedValue = 0 
                      then add a dynamic text field to all me to type in 'other' on my html.
                      I'm very new at javascript and any help that could be given would be appreciated!
                 }
    }
    
    </script>
    Last edited by jedaisoul; 06-06-2014 at 03:24 AM. Reason: code tags added

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389

    Lightbulb

    Slight modification...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    <style type="text/css">
     #otherValue { color:#ffffff; background-color:#ff0000; }
    </style>
    
    </head>
    <body>
    <select id="selectBox" onchange="changeFunc(this.value)">
     <option value="0">Select</option>
     <option value="1">GSD AMS</option>
     <option value="2">GSD APJ</option>
     <option value="3">GSD EMEA</option>
     <option value="4">GSD Customer Solution Center</option>
     <option value="5">GSD Supply Chain</option>
     <option value="6">Delivery Readiness</option>
     <option value="7">Business Process, Customer Experience and Quality</option>
     <option value="8">Business Operations</option>
     <option value="9">GSD Engineering Resolution</option>
     <option value="10">GSD Escalation Management</option>
     <option value="11">Other</option>
    </select>
    
    <span id="otherValue" style="display:none"> Other: <input type="text" id="other" value=""> </span>
    <p>
    
    <script type="text/javascript">
    function changeFunc(info) {
      if (info == '11') { document.getElementById('otherValue').style.display = ''; }
                   else { document.getElementById('otherValue').style.display = 'none'; }
    }
    </script>
    
    </body>
    </html>
    BTW, you should put [ code] and [ /code] tags (without the spaces) around your script
    to make it easier for others to see, copy, debug, etc. It also retains the formatting of your code.

  3. #3
    Join Date
    Jun 2014
    Posts
    10
    Thank you very much JMRKER, that was exactly what I was looking for!! And the advice is appreciated also.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,389
    You're most welcome.
    Happy to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles