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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Modify the page (show/hide) form fields according to DropDown Box Selection??

    What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears.

    I was so close to make it , using this example:
    Code:
    <script type="text/javascript">
    function showInfo()
    {
    var elem = document.getElementById('verify');
    if(document.forms[0].menu.value == "verify"){
    elem.style.display="inline";}
    else{
    elem.style.display="none";}
    }
    </script>
    </head>
    
    <body>
    <form action="#" method="post">
    <select name="menu" onchange="showInfo()">
    <option value="none">Select an option</option>
    <option value="email">Email</option>
    <option value="verify">Verify</option>
    </select>
    
    <div id="verify" style="display:none;">
    <input type="text" value="Username" >
    <input type="password" value="password" >
    </div>
    </form>


    But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears.

    Here are some images of what I want to do.
    Before:
    http://img82.imageshack.us/img82/7093/beforens9.jpg

    After
    http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules).

    So can someone help me with this script?? Please! I am pritty noob to the javascript.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Toggle(obj){
     var val=obj.value;
     if (!obj.m){ obj.m=''; }
     if (!obj.m.match(val)){ obj.m+=','+val+','; }
     var hide=obj.m.split(',');
     for (var zxc0=0;zxc0<hide.length;zxc0++){
      if (document.getElementById(hide[zxc0])){
       document.getElementById(hide[zxc0]).style.display='none';
      }
     }
     var show=val.split(',');
     for (var zxc1=0;zxc1<show.length;zxc1++){
      if (document.getElementById(show[zxc1])){
       document.getElementById(show[zxc1]).style.display='';
      }
     }
    }
    
    //-->
    </script></head>
    
    <body>
    <form >
    <select onchange="Toggle(this);" >
    <option value="" >Option 0</option>
    <option value="TB1,TB2" >Option 1</option>
    <option value="TB3" >Option 2</option>
    <option value="TB4" >Option 3</option>
    </select>
    <br>
    <input id="TB1" value="TB1" style="display:none;" ><br>
    <input id="TB2" value="TB2" style="display:none;" ><br>
    <input id="TB3" value="TB3" style="display:none;" ><br>
    <input id="TB4" value="TB4" style="display:none;" ><br>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you a lot vwphillips!!!!

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awsome code vwphillips you rock!!! I'm going to use it in a form I'm doing...I was wondering how I could make one of the optional fields required???

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    not realy understanding the question
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would like to add a form submit button and have some validation. So if the user doesn't enter any information on say the TB3 field that they would get a error saying TB3 must be filled out.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Toggle(obj){
     var val=obj.value;
     if (!obj.m){ obj.m=''; }
     if (!obj.m.match(val)){ obj.m+=','+val+','; }
     var hide=obj.m.split(',');
     for (var zxc0=0;zxc0<hide.length;zxc0++){
      if (document.getElementById(hide[zxc0])){
       document.getElementById(hide[zxc0]).style.display='none';
      }
     }
     var show=val.split(',');
     for (var zxc1=0;zxc1<show.length;zxc1++){
      if (document.getElementById(show[zxc1])){
       document.getElementById(show[zxc1]).style.display='';
      }
     }
    }
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function Validate(frm){
     var zxcary=['TB1','TB2','TB3','TB4'];
     var zxcmess=['Please Complete']
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      var save=frm[zxcary[zxc0]].style.display;
      frm[zxcary[zxc0]].style.display='';
      if (frm[zxcary[zxc0]].value.length<1){
       zxcmess.push(zxcary[zxc0]);
      }
      frm[zxcary[zxc0]].style.display=save;
     }
     if (zxcmess.length>1){
      alert(zxcmess.join('\n'));
      return false;
     }
     return true;
    }
    
    
    //-->
    </script>
    
    
    
    </head>
    
    <body>
    <form onsubmit="return Validate(this);" action="http://www.vicsjavascripts.org.uk" >
    <select onchange="Toggle(this);" >
    <option value="" >Option 0</option>
    <option value="TB1,TB2" >Option 1</option>
    <option value="TB3" >Option 2</option>
    <option value="TB4" >Option 3</option>
    </select>
    <br>
    <input id="TB1" value="" style="display:none;" ><br>
    <input id="TB2" value="" style="display:none;" ><br>
    <input id="TB3" value="" style="display:none;" ><br>
    <input id="TB4" value="" style="display:none;" ><br>
    <input type="submit" name="" value="Submit">
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that's cool!!

    But what what I've been trying to do... is say the user selects option 2 the only field that is visible is TB3 which I want to have validation on. Otherwise if they select option 1 I don't want them to get a error to fill out field TB3 because they can't see it.

    I guess what I'm saying is that I only want users to be required to fill in fields that are visible. I hope this makes sense.

    Thanks for all your help so far!

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <script type="text/javascript">
    <!--
    
    function Validate(frm){
     var zxcary=['TB1','TB2','TB3','TB4'];
     var zxcmess=['Please Complete']
     for (var zxc0=0;zxc0<zxcary.length;zxc0++){
      var save=frm[zxcary[zxc0]].style.display;
      if (frm[zxcary[zxc0]].style.display!='none'){
       if (frm[zxcary[zxc0]].value.length<1){
        zxcmess.push(zxcary[zxc0]);
       }
      }
     }
     if (zxcmess.length>1){
      alert(zxcmess.join('\n'));
      return false;
     }
     return true;
    }
    
    
    //-->
    </script>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I said it before and I'll say it again... Vic you Rock!!!!

  • #11
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey I know this thread is really old, but is it possible (in this example or in a different way) to make form fields appear based on the given selection, but have the new fields utilize the same space? In the example used in this thread, each fields that appear based on a given selection from the drop down, appear below each other, they don't appear in the space directly below the drop down. I would like my fields that show up to just use the next available space, instead of having them all spaced out..

    How is this possible?


  •  

    Posting Permissions

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