SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Javascript] Control in the select

    Hi everyone.

    I have this web page:

    PHP Code:

    <html>

    <
    head>
    <
    SCRIPT>
    <!--

    function 
    validate(theform)



      for (var 
    0theform.elements.lengtha++) 
        {
        var 
    campo theform.elements[a];

          if (
    campo.value.length <= 0)
          
            {
                
    window.alert('KO');
                
    campo.focus();
                return 
    false;
          }
     }
            
        return(
    true);
      
    }

    // -->

     
    </script>
     

     </head>

    <body>

    <form action="paginat.asp" method="POST" onSubmit="return validate(this)">

    <select size="1" name="D1">
    <option>Select</option>
    <option value="CCC">CCC</option>
    <option value="AAA">AAA</option>
    <option value="BBB">BBB</option>
    </select>

    <select size="1" name="D2">
    <option>Select</option>
    <option value="CCC">CCC</option>
    <option value="AAA">AAA</option>
    <option value="BBB">BBB</option>
    </select>

    <input type="submit" value="Invia" name="B1">
    </form>

    </body>

    </html> 
    I check that the value of select D2 is always different from value select D1.

    For example:

    1) value of select D1 = AAA
    2) value of select D2 = BBB

    it's right.

    1) value of select D1 = AAA
    2) value of select D2 = AAA

    it's wrong.

    Can you help me for to have this control in the function validate(theform) ?

    many thanks
    Viki

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by viki1967 View Post
    I check that the value of select D2 is always different from value select D1.

    For example:

    1) value of select D1 = AAA
    2) value of select D2 = BBB

    it's right.

    1) value of select D1 = AAA
    2) value of select D2 = AAA

    it's wrong.

    Can you help me for to have this control in the function validate(theform) ?
    I created the script below for someone who asked for this functionality recently. It prevents duplicate selections being made and works independently of any separate validation function.
    You initialise it with a single function call as shown at the end of the document.
    You can have multiple independent groups.

    Code:
    <html>
    <head>
    <title>Unique Selection</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <script type='text/javascript'>
    
    function UniqueSelect(/*28432953637269707465726C61746976652E636F6D*/)
    {
     this.boxes=[];
     this.args=arguments;
    
     this.init=function()
     {
      for(var i=0, len=this.args.length, obj=this.boxes[i]; i<len; i++)
      {
       obj={};
       obj.box=this.args[i];
       obj.prevOption=obj.box.options[obj.box.selectedIndex];
       this.addToHandler( obj.box, 'onchange', this.getSelf(this, i) );
       this.boxes[i]=obj;
      }
     }
    
     this.getSelf=function(inst, idx)
     {
      return function(){ inst.check(inst, idx)  };
     }
    
     this.check=function(inst, current)
     {
      var otherOption, otherBox, currentBox=inst.boxes[current].box;
      
      if(currentBox.options[currentBox.selectedIndex].disabled)
      { /* I.E. crutchware */
       alert('Duplicate Selection');
       currentBox.selectedIndex=0;
      }
      
      for(var i=0, boxes=inst.boxes, len=boxes.length; i<len; i++)
      {
       if( i!=current )
       {
        otherBox=boxes[i].box;
    
        for(var j=0, optLen=otherBox.options.length; j<optLen; j++)
        { 
         if((otherOption=otherBox.options[j]).text==currentBox.options[currentBox.selectedIndex].text)
          otherOption.disabled=true;
         else
          if(otherOption.text == inst.boxes[current].prevOption.text)
           otherOption.disabled=false;       
        }
       }
      }
      
      inst.boxes[current].prevOption=currentBox.options[currentBox.selectedIndex];
     }
     
     this.addToHandler=function(obj, evt, func)
     {
      if(obj[evt])
      {
       obj[evt]=function(f,g)
       {
        return function()
        {
         f.apply(this,arguments);
         return g.apply(this,arguments);
        };
       }(func, obj[evt]);
      }
      else
       obj[evt]=func;
     }
    
     
     this.init();
    }
    </script>
    </head>
    <body bgcolor='#ffefd5'>
    
    <form name='f1'>
     <select name='s1'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s2'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s3'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s4'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six 
     </select>
    </form>
    
    <script type='text/javascript'>
    
    with(document.forms.f1)
     new UniqueSelect(s1, s2, s3, s4); 
    
    </script>
    
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Evangelist Miguel61's Avatar
    Join Date
    Mar 2008
    Posts
    402
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your script it's very interesting !!!!

  4. #4
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    I created the script below for someone who asked for this functionality recently. It prevents duplicate selections being made and works independently of any separate validation function.
    You initialise it with a single function call as shown at the end of the document.
    You can have multiple independent groups.

    Code:
    <html>
    <head>
    <title>Unique Selection</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    
    <script type='text/javascript'>
    
    function UniqueSelect(/*28432953637269707465726C61746976652E636F6D*/)
    {
     this.boxes=[];
     this.args=arguments;
    
     this.init=function()
     {
      for(var i=0, len=this.args.length, obj=this.boxes[i]; i<len; i++)
      {
       obj={};
       obj.box=this.args[i];
       obj.prevOption=obj.box.options[obj.box.selectedIndex];
       this.addToHandler( obj.box, 'onchange', this.getSelf(this, i) );
       this.boxes[i]=obj;
      }
     }
    
     this.getSelf=function(inst, idx)
     {
      return function(){ inst.check(inst, idx)  };
     }
    
     this.check=function(inst, current)
     {
      var otherOption, otherBox, currentBox=inst.boxes[current].box;
      
      if(currentBox.options[currentBox.selectedIndex].disabled)
      { /* I.E. crutchware */
       alert('Duplicate Selection');
       currentBox.selectedIndex=0;
      }
      
      for(var i=0, boxes=inst.boxes, len=boxes.length; i<len; i++)
      {
       if( i!=current )
       {
        otherBox=boxes[i].box;
    
        for(var j=0, optLen=otherBox.options.length; j<optLen; j++)
        { 
         if((otherOption=otherBox.options[j]).text==currentBox.options[currentBox.selectedIndex].text)
          otherOption.disabled=true;
         else
          if(otherOption.text == inst.boxes[current].prevOption.text)
           otherOption.disabled=false;       
        }
       }
      }
      
      inst.boxes[current].prevOption=currentBox.options[currentBox.selectedIndex];
     }
     
     this.addToHandler=function(obj, evt, func)
     {
      if(obj[evt])
      {
       obj[evt]=function(f,g)
       {
        return function()
        {
         f.apply(this,arguments);
         return g.apply(this,arguments);
        };
       }(func, obj[evt]);
      }
      else
       obj[evt]=func;
     }
    
     
     this.init();
    }
    </script>
    </head>
    <body bgcolor='#ffefd5'>
    
    <form name='f1'>
     <select name='s1'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s2'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s3'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six
     </select>
     <select name='s4'>
      <option value=''>Select
      <option value='1'>One
      <option value='2'>Two
      <option value='3'>Three
      <option value='4'>Four
      <option value='5'>Five
      <option value='6'>Six 
     </select>
    </form>
    
    <script type='text/javascript'>
    
    with(document.forms.f1)
     new UniqueSelect(s1, s2, s3, s4); 
    
    </script>
    
    </body>
    </html>

    Many thanks, this is solution for my problem.
    Viki


Bookmarks

Posting Permissions

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