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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    JS Function not working with multiple vars

    Hey everyone,

    I'm very new to JS and am having some trouble with a function to hide and display elements of a form depending on the selection of an options input.

    I'm currently trying the following:
    Code:
     <script type="text/JavaScript">
      function Checktype(val){
     var urlelement=document.getElementById('url');
     var urltitleelement=document.getElementById('urltitle');
    
     
     if(val=='video')
       urlelement.style.display='block';
       urltitleelement.style.display='block';
     
     else  
       urlelement.style.display='none';
       urltitleelement.style.display='none';
    
       }
       
    
        
        </script>
    Which should display and hide two elements of the form depending on the selection of a drop-down options input. It works fine when I run it with just one element like this:
    Code:
     <script type="text/JavaScript">
      function Checktype(val){
     var urlelement=document.getElementById('url');
    
     
     if(val=='video')
       urlelement.style.display='block';
     
     else  
       urlelement.style.display='none';
    
       }
       
    
        
        </script>
    but I have 12 elements of the form I want to control like this in the function and as soon as I add a second it stops working. Where am I going wrong?

    Thanks

    YD
    Last edited by YourDirector; 07-23-2012 at 12:18 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    var Ary=[ ];
    // field 0 = toggle inputs
    // field 1 = close inputs
    // field 2 = open inputs
    Ary['srt']=[[],['ip1','ip2','ip3','ip4','ip5','ip6','ip7','ip8','ip9','ip10','ip11','ip12'],[]];
    Ary['12']=[['ip1','ip2'],[],[]];
    Ary['tom']=[[],['ip1','ip2'],[]];
    Ary['joe']=[[],[],['ip1','ip2']];
    Ary['joe1']=[['ip3','ip4'],['ip1','ip2'],[]];
    
    function INPUTS(sel){
     var frm=sel.form,ary=Ary[sel.value],ip,z0;
     if (ary){
      if (ary[0]){
       for (z0=0;z0<ary[0].length;z0++){
        ip=frm[ary[0][z0]];
        if (ip){
         ip.style.display=ip.style.display!='none'?'none':'inline';
        }
       }
      }
      if (ary[1]){
       for (z0=0;z0<ary[1].length;z0++){
        ip=frm[ary[1][z0]];
        if (ip){
         ip.style.display='none';
        }
       }
      }
      if (ary[2]){
       for (z0=0;z0<ary[2].length;z0++){
        ip=frm[ary[2][z0]];
        if (ip){
         ip.style.display='inline';
        }
       }
      }
     }
     sel.selectedIndex=0;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <form>
     <select id="sel" onchange="INPUTS(this);"  >
      <option value="srt" >Select</option>
      <option value="12" >Toggle 1 & 2</option>
      <option value="tom" >Close 1 & 2</option>
      <option value="joe" >Open 1 & 2</option>
      <option value="joe1" >Toggle 3 & 4 close 1 & 2</option>
     </select>
      <input type="text" name="ip1" value="input 1" /><br />
      <input type="text" name="ip2" value="input 2" /><br />
      <input type="text" name="ip3" value="input 3" /><br />
      <input type="text" name="ip4" value="input 4" /><br />
      <input type="text" name="ip5" value="input 5" /><br />
      <input type="text" name="ip6" value="input 5" /><br />
      <input type="text" name="ip7" value="input 7" /><br />
      <input type="text" name="ip8" value="input 8" /><br />
      <input type="text" name="ip9" value="input 9" /><br />
      <input type="text" name="ip10" value="input 10" /><br />
      <input type="text" name="ip11" value="input 11" /><br />
      <input type="text" name="ip12" value="input 12" /><br />
    
    </form>
    <script  type="text/javascript">
    /*<![CDATA[*/
     INPUTS(document.getElementById('sel'));
    /*]]>*/
    </script>
    </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/


  •  

    Posting Permissions

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