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
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    validate select list

    I want to validate a select list that looks like the below select list. How can I do this when it is named "status[]".

    <select size='4' MULTIPLE name='status[]'>

    <option value='COMPLETE'>COMPLETE</option>
    <option value='ENTERED'>ENTERED</option>
    <option value='INSTALLED'>INSTALLED</option>
    </select>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Which is the problem with that name? Can you detail?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    How do I validate that at least one of the select list values are selected. I'm having problems becuase I named the list status[].

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    The element name status[] is invalid in Javascript, but you can reference the select list using document.getElementById("status").


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your element name is valid.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>TEST</title>
    </head>
    <body>
    <form action='' onsubmit="return validator( this )">
    <p>
     <select size='4' MULTIPLE name='status[]'>
      <option value='COMPLETE'>COMPLETE</option>
      <option value='ENTERED'>ENTERED</option>
      <option value='INSTALLED'>INSTALLED</option>
     </select> 
     <input type='submit'>
    </form>
    <script type='text/javascript'>
    
    function validator( f )
    {
     var ok = false, box;
     
     for( var i = 0, box = f[ 'status[]' ]; i < box.length && !( ok = box.options[ i ].selected ) ; i++ )
     ;
     
     if( !ok )
      alert( 'Nothing selected' );
     
     return ok;   
    }
    
    </script>
    </body>
    </html>

  • Users who have thanked Logic Ali for this post:

    nikko50 (01-03-2011)

  • #6
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    That rocks.

    Tracy

  • #7
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Hey. If I wanted to put focus back on the select list how would i do that. I tried the below but no work.

    if( !ok ){
    theForm2.status.style.backgroundColor='pink';

    theForm2.status.focus();
    return false;
    }

  • #8
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by nikko50 View Post
    Hey. If I wanted to put focus back on the select list how would i do that. I tried the below but no work.

    if( !ok ){
    theForm2.status.style.backgroundColor='pink';

    theForm2.status.focus();
    return false;
    }
    Use the same notation from my example: theForm[ 'status[]' ].focus();

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Philip M View Post
    The element name status[] is invalid in Javascript, but you can reference the select list using document.getElementById("status").
    Not quite. As long as it is used as a string argument within an encapsulated brackets reference, should be ok.
    Code:
    document.forms['formname'].elements['status[]'][0]
    //or even
    document.getElementsByName('status[]')[0]
    To: nikko50
    I would have another question to to put: Why to use a name as "something[]" as long as you have a single element with a certain name? This way of naming (with[]) is used only related with php/MySQL server-side combination, as PHP is able to detect an array of name=value within the query, if it is the case. But it looks like there is no array of names there. Or it is?
    Last edited by Kor; 01-03-2011 at 08:16 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    this does not work correctly. If the user selects anything other than the first item in the list it does not validate true. How do I fix??

    Code:
    <script>
    function validator(f)
    {
    
     var ok = false, box;
     
     for( var i = 0, box = f[ 'vendors[]' ]; i < box.length && !( ok = box.options[ i ].selected ) ; i++ )
      
     if( !ok ){
       alert('Please Select a Vendor');
      
     for(var i=0; i<box.length; i++) {  
              document.forms['theForm2'].elements['vendors[]'][i].style.background = 'pink';
              }
    
       return false;  
      }
    
     
    
      
     
     return true;
    }
    
    </script>
    
    
    <form method="POST" action="/S2/index2.php" name="theForm2" > 
     
        <fieldset class="label3"><legend class="label3">Query</legend>
     
    <table class="small"> 
      <tr >
       <td>
          Vendor<br>
         <select size='4' MULTIPLE  name='vendors[]'> 
                    
    
    <option value='375'>MISC</option>
    <option value='367'>IBM</option>
    <option value='369'>HP</option>
                    
                  </select>
       
        </td>
        
     
      
        <td VALIGN="middle"> &nbsp;&nbsp;<input type="button" onClick="return validator(this.form) && this.form.submit()" class="submitBtn" value="Search" name="B1">
        </td>
        
     
     </tr>
    </table> 
                                      
     </fieldset>
           <input type="HIDDEN" value="form2" name="Submit">
    </form>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Why work so hard?
    Code:
    function validator(f)
    {
        var ddown = f["vendors[]"];
        for( var i = 0; i < ddown.length; ++i )
        {
             if ( ddown.options[i].selected ) return true;
             ddown.options[i].style.background = 'pink';
        }
        alert('Please Select a Vendor');
        return false;
    }
    Yes, the options will be turned pink even if one of them is selected, but so what? The form will then be submitted and they will only be visible for a fraction of a second.

    If none of them are selected, then all will indeed appear pink and the form won't be submitted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    LinkBacks (?)


    Posting Permissions

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