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
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post

    Question If input = this, show this div below?

    Hello,

    I'm going to be having this drop-down/auto-fill input field on my form and was wondering how to show, for example:

    If input = programming show the programming div...
    If input = multimedia show the multimedia div...

    I also need to know how to show multiple auto-fill fields on one page at a time and if they are the same question repeated, the field then gets removed from the list so it isn't chosen on any other of the same question.

    Best Regards,
    Tim

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    I'm not sure I understand your second requirement, but this might solve the first.
    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=268044
    
    function showLang(info) {
      var sel = document.getElementById(info);
      if (sel.style.display == 'block') { sel.style.display = 'none'; }
                                   else { sel.style.display = 'block'; }
    }
    </script>
    
    <style type="text/css">
    .clang { 
      display:none;
      border:1px solid blue;
      height:40px;
      width:80px;
    }
    </style>
    
    </head>
    <body>
    <select id="combobox" style="height: 40px;" onchange="showLang(this.value)">
      <option value="">Select one...</option>
      <option value="ActionScript">ActionScript</option>
      <option value="AppleScript">AppleScript</option>
      <option value="Asp">Asp</option>
      <option value="BASIC">BASIC</option>
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Clojure">Clojure</option>
      <option value="COBOL">COBOL</option>
      <option value="ColdFusion">ColdFusion</option>
      <option value="Erlang">Erlang</option>
      <option value="Fortran">Fortran</option>
      <option value="Groovy">Groovy</option>
      <option value="Haskell">Haskell</option>
      <option value="Java">Java</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Lisp">Lisp</option>
      <option value="Perl">Perl</option>
      <option value="PHP">PHP</option>
      <option value="Python">Python</option>
      <option value="Ruby">Ruby</option>
      <option value="Scala">Scala</option>
      <option value="Scheme">Scheme</option>
    </select>
    <div class='clang' id="ActionScript"> ActionScript </div>
    <div class='clang' id="AppleScript"> AppleScript </div>
    <div class='clang' id="Asp"> Asp </div>
    <div class='clang' id="BASIC"> BASIC </div>
    <div class='clang' id="C"> C </div>
    <div class='clang' id="C++"> C++ </div>
    <div class='clang' id="Clojure"> Clojure </div>
    <div class='clang' id="COBOL"> COBOL </div>
    <div class='clang' id="ColdFusion"> ColdFusion </div>
    <div class='clang' id="Erlang"> Erlang </div>
    <div class='clang' id="Fortran"> Fortran </div>
    <div class='clang' id="Groovy"> Groovy </div>
    <div class='clang' id="Haskell"> Haskell </div>
    <div class='clang' id="Java"> Java </div>
    <div class='clang' id="JavaScript"> JavaScript </div>
    <div class='clang' id="Lisp"> Lisp </div>
    <div class='clang' id="Perl"> Perl </div>
    <div class='clang' id="PHP"> PHP </div>
    <div class='clang' id="Python"> Python </div>
    <div class='clang' id="Ruby"> Ruby </div>
    <div class='clang' id="Scala"> Scala </div>
    <div class='clang' id="Scheme"> Scheme </div>
    </body>
    </html>
    Put your input fields in each <div> section.

    Need clarification on requirements remaining.

  • Users who have thanked jmrker for this post:

    MrTIMarshall (07-17-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jmrker View Post
    I'm not sure I understand your second requirement, but this might solve the first.
    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=268044
    
    function showLang(info) {
      var sel = document.getElementById(info);
      if (sel.style.display == 'block') { sel.style.display = 'none'; }
                                   else { sel.style.display = 'block'; }
    }
    </script>
    
    <style type="text/css">
    .clang { 
      display:none;
      border:1px solid blue;
      height:40px;
      width:80px;
    }
    </style>
    
    </head>
    <body>
    <select id="combobox" style="height: 40px;" onchange="showLang(this.value)">
      <option value="">Select one...</option>
      <option value="ActionScript">ActionScript</option>
      <option value="AppleScript">AppleScript</option>
      <option value="Asp">Asp</option>
      <option value="BASIC">BASIC</option>
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Clojure">Clojure</option>
      <option value="COBOL">COBOL</option>
      <option value="ColdFusion">ColdFusion</option>
      <option value="Erlang">Erlang</option>
      <option value="Fortran">Fortran</option>
      <option value="Groovy">Groovy</option>
      <option value="Haskell">Haskell</option>
      <option value="Java">Java</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Lisp">Lisp</option>
      <option value="Perl">Perl</option>
      <option value="PHP">PHP</option>
      <option value="Python">Python</option>
      <option value="Ruby">Ruby</option>
      <option value="Scala">Scala</option>
      <option value="Scheme">Scheme</option>
    </select>
    <div class='clang' id="ActionScript"> ActionScript </div>
    <div class='clang' id="AppleScript"> AppleScript </div>
    <div class='clang' id="Asp"> Asp </div>
    <div class='clang' id="BASIC"> BASIC </div>
    <div class='clang' id="C"> C </div>
    <div class='clang' id="C++"> C++ </div>
    <div class='clang' id="Clojure"> Clojure </div>
    <div class='clang' id="COBOL"> COBOL </div>
    <div class='clang' id="ColdFusion"> ColdFusion </div>
    <div class='clang' id="Erlang"> Erlang </div>
    <div class='clang' id="Fortran"> Fortran </div>
    <div class='clang' id="Groovy"> Groovy </div>
    <div class='clang' id="Haskell"> Haskell </div>
    <div class='clang' id="Java"> Java </div>
    <div class='clang' id="JavaScript"> JavaScript </div>
    <div class='clang' id="Lisp"> Lisp </div>
    <div class='clang' id="Perl"> Perl </div>
    <div class='clang' id="PHP"> PHP </div>
    <div class='clang' id="Python"> Python </div>
    <div class='clang' id="Ruby"> Ruby </div>
    <div class='clang' id="Scala"> Scala </div>
    <div class='clang' id="Scheme"> Scheme </div>
    </body>
    </html>
    Put your input fields in each <div> section.

    Need clarification on requirements remaining.
    Thank you for making this script.

    This is part of an staff application form I am making for a website I'm currently working on. I'd like to show this Auto-fill/Drop-Down Menu which I obtained with the JQuery Development Bundle and they enter a skill.

    Once they have chosen a skill, the div will then appear below asking them to be more specific, for example, if they choose programming, a list of languages will appear below for them to choose from.

    The version you have posted, if you choose one, then another, it shows the divs but doesn't hide the inactive divs, I'd like only the chosen option to appear.

    By adding multiple, I'd like to add a button so they can add another skill, I've done this on another form by simply adding more content but that was basic.

    I'm not sure at this moment of time, but the maximum would be 5 skills, 3 showing and two optional extra.

    Would you be able to implement the Auto-fill/Drop-down Menu I linked please?

    Best Regards,
    Tim

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    I don't use JQuery, so this is a solution without that option...

    I don't understand your requirement of a maximum of 5 options
    comprised of 3 displays and 2 extras. This does not make sense to me.

    You could fill in the entries with each skill from a common list,
    but I don't know what you intend to include in that part of the code.

    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/newreply.php?do=postreply&t=268044
    
    function showLang(info) {
      document.getElementById('comboBox').size = 1;
      var sel = document.getElementById('divSections').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) {
        if (sel[i].id == info) { document.getElementById(sel[i].id).style.display = 'block'; }
                          else { document.getElementById(sel[i].id).style.display = 'none'; }
      }
      var picked = [];
      for (var i=0; i<document.getElementById('comboBox').options.length; i++) {
        if (document.getElementById('comboBox').options[i].selected == true) { picked.push(i); }
      } 
    
      if (picked.length > 5) { alert('Over limit of 5 choices'); }
      else {
        for (var i=0; i<picked.length; i++) {
          document.getElementById(sel[picked[i]].id).style.display = 'block'; 
        }
      }
      document.getElementById('comboBox').selectedIndex = -1;		// reset list
    }
    function SetMDDsize(mddSize) {
      document.getElementById('comboBox').size = mddSize;
    }
    
    </script>
    
    <style type="text/css">
    .clang { 
      display:none;
      border:1px solid blue;
      height:80px;
      width:160px;
    }
    </style>
    
    </head>
    <body>
    Click, Shift-Click or Ctrl-Click <br> from 1 to 5 languages<br />
    <select id="comboBox" onchange="SetMDDsize(10)" multiple size="1">
      <option value="ActionScript">ActionScript</option>
      <option value="AppleScript">AppleScript</option>
      <option value="Asp">Asp</option>
      <option value="BASIC">BASIC</option>
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Clojure">Clojure</option>
      <option value="COBOL">COBOL</option>
      <option value="ColdFusion">ColdFusion</option>
      <option value="Erlang">Erlang</option>
      <option value="Fortran">Fortran</option>
      <option value="Groovy">Groovy</option>
      <option value="Haskell">Haskell</option>
      <option value="Java">Java</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Lisp">Lisp</option>
      <option value="Perl">Perl</option>
      <option value="PHP">PHP</option>
      <option value="Python">Python</option>
      <option value="Ruby">Ruby</option>
      <option value="Scala">Scala</option>
      <option value="Scheme">Scheme</option>
    </select>
    <button onclick="showLang(document.getElementById('comboBox').value)">Show picks</button>
    
    <div id="divSections">
     <div class='clang' id="ActionScript"> ActionScript </div>
     <div class='clang' id="AppleScript"> AppleScript </div>
     <div class='clang' id="Asp"> Asp </div>
     <div class='clang' id="BASIC"> BASIC </div>
     <div class='clang' id="C"> C </div>
     <div class='clang' id="C++"> C++ </div>
     <div class='clang' id="Clojure"> Clojure </div>
     <div class='clang' id="COBOL"> COBOL </div>
     <div class='clang' id="ColdFusion"> ColdFusion </div>
     <div class='clang' id="Erlang"> Erlang </div>
     <div class='clang' id="Fortran"> Fortran </div>
     <div class='clang' id="Groovy"> Groovy </div>
     <div class='clang' id="Haskell"> Haskell </div>
     <div class='clang' id="Java"> Java </div>
     <div class='clang' id="JavaScript"> JavaScript </div>
     <div class='clang' id="Lisp"> Lisp </div>
     <div class='clang' id="Perl"> Perl </div>
     <div class='clang' id="PHP"> PHP </div>
     <div class='clang' id="Python"> Python </div>
     <div class='clang' id="Ruby"> Ruby </div>
     <div class='clang' id="Scala"> Scala </div>
     <div class='clang' id="Scheme"> Scheme </div>
    </div>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Posts
    432
    Thanks
    56
    Thanked 1 Time in 1 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>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
    		<script language="javascript">
                var counter = 1;
                var limit = 5;
                function addInput(divName){
                    if (counter == limit)  {
                      alert("You have reached the limit of adding " + counter + " locations.");
                    }
                    else {
                      var newdiv = document.createElement('div');
                      newdiv.innerHTML ="<div class='Obtain_Wrap'><label for='Location1' style='margin: 0px -25px 0px 0px;'>Enter another location of how users are able to obtain. (* Cost only applies to fixed prices)</label><br><input type='text' id='Location' name='myInputs[]' value='Enter a Location' style='width:170px; margin: 0px 5px 15px 0px;'  onfocus=value='';><input type='text' id='Cost' name='myInputs[]' value='Cost*' style='width:60px; margin: 0px 5px 15px 15px;' onfocus=value='';></div>";
                      document.getElementById(divName).appendChild(newdiv);
                      counter++;
                    }
                };
    		</script>
            <style>
    			.Container {
    				width: 500px;
    				height: 100%
    				margin: 0px auto;
    			}
    			.Section_Head {
    				height: 22px;
    				width: 100%;
    				float: left;
    				border-bottom-width: thin;
    				border-bottom-color: #999;
    				margin-bottom: 20px;
    			}		
    			.How_To_Obtain {
                    float: left;
                    clear: left;
                    width: 100%;
    				margin-bottom: 15px;
                }		
    			.Obtain_Wrap {
                    float: left;
                    clear: left;
                    width: 100%;
                }
    			
    			.Section_End {
    				height: 2px;
    				width: 100%;
    				background-color: #CCC;
    				float: left;
    				margin: 15px 0px 15px 0px;
    			}
    		</style>
        </head>
    
        <body>
            <div class="Container">
                <div class="How_To_Obtain">
                    <div id="dynamicInput">
                        <div class="Section_Head">How to obtain this item?</div>
                        <div class="Obtain_Wrap">
                            <label for="Location1" style="margin: 0px -25px 0px 0px">Enter the location of how users are able to obtain. (* Cost only applies to fixed prices)</label>
                            <input type="text" id="Location1" name="myInputs[]" value="Enter a Location" style="width:170px; margin: 0px 5px 15px 0px;" onfocus=value='';><input type="text" id="Cost1" value="Cost*" style="width:60px; margin: 0px 5px 15px 15px;" ;>
                        </div>
                    </div>
                    <br />
                    <input type="button" value="Add another location?" onClick="addInput('dynamicInput');">
                    <div class="Section_End"></div>
                </div>
            </div> 
        </body>
    </html>
    I've just stripped this from one of my forms, sorry I can't provide a live demo at this moment of time.

    So change the question for "What are your skills?" which will be on an Auto-fill/Predictive-Text input field. If the entry in the input field matches one of the predefined options, it will show a new container, underneath with more options in, titles "More specifically...".

    So, I might just have one of these fields showing at first, but this should give you more of an understanding to what I previously meant by adding more and the maximum being five.

    If the input field matches and the additional container shows but then they change their mind and want to enter a new value, the additional container should disappear and once they have entered the new value, the new container should show.

    I hope this is more clear and I'm not making things too complicated.

    Best Regards,
    Tim

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,130
    Thanks
    38
    Thanked 504 Times in 498 Posts
    While I am not sure how your last post is related to the earlier posts,
    I'm sure you will have a problem in the future when you try to use it.

    With each new display with the 'Add Location' button, you create
    an element with the same ID value. ID values must be unique.
    This becomes especially confusing when you try to getElementById()
    and the computer does not know which one to use.


  •  

    Posting Permissions

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