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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Error check for duplicate values in associative array used as form input?

    Hello,

    This is my first post to CodingForums, and I'm here because of a problem I'm having with some JavaScript. I'm sort of a JS newbie compared to most of you, so this is probably a no-brainer for JS pros.

    For all forms on my website, I use JS to validate the fields. If the validation passes, JS submits the form. If my form consists of 3 or more SELECT inputs, and if the options are identical in each input, how can I use JS to make sure no option is chosen twice? The inputs have to be submitted as an associative array. For example, take this form:

    <FORM action="script.php" method="POST" name="form">
    <SELECT name="select[apple]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[orange]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[banana]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    etc...
    <INPUT type="button" value="SUBMIT" onCLick="validate_fields();">
    </FORM>

    I won't post the JS functions I've been using, because it might only confuse you more. Besides, there are a dozen versions of it. This has had me stumped through a lot of trial and error, and I'm sure there's a simple method that I'm just not getting. Any help would be greatly appreciated. Thank you all in advance!

    JOSH

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function validate_fields(f){
      var apple = f.elements['select[apple]'].selectedIndex;
      var orange = f.elements['select[orange]'].selectedIndex;
      var banana = f.elements['select[banana]'].selectedIndex;
      if (apple == orange || apple == banana || orange == banana){
        alert("Identical selection is not allowed.");
        return false; //cancel submission
      }
    
      //...other validations here
    
      return true; //all inputs are valid
    }
    </script>
    </head>
    <body>
    <FORM action="script.php" method="POST" name="form" onsubmit="return validate_fields(this);">
    <SELECT name="select[apple]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[orange]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[banana]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    etc...
    <INPUT type="button" value="SUBMIT" />
    </FORM>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Glenn! But I wish it were that easy. =o)

    The array indeces (apple, orange, banana) won't be the same every time,
    and there may be more than three elements in the array at times. Is there
    a way to do it without explicitly referencing those indeces by name?

    I guess I should post the function I came up with. Maybe you (or someone
    else) can make it work. It seems like the simplest approach, but something's
    just off! I'm hoping the error is obvious, so please take a look:

    Code:
    function catch_duplicates() {
      count1 = 0;
      count2 = 0;
      for(i in select) {
        if(buffer[select[i]] != 1) {
          buffer[select[i]] = 1;
          count2++;
        }
        count1++;
      }
      if(count1 != count2) {
        alert('error');
      }
    }
    NOTE: This error check works as a non-function and if you define the array
    in JavaScript rather than as form inputs. For example:

    Code:
    select = new Array();
    select[dopey] = "1";
    select[sneezy] = "2";
    select[grumpy] = "3";
    select[happy] = "2";
    
    buffer = new Array();
    count1 = 0;
    count2 = 0;
    for(i in select) {
      if(buffer[select[i]] != 1) {
        buffer[select[i]] = 1;
        count2++;
      }
      count1++;
    }
    if(count1 != count2) {
      alert('error');
    }
    Any ideas? This is making me nuts. =oP

    JOSH
    Last edited by applejack; 01-10-2005 at 03:59 PM.

  • #4
    Owl
    Owl is offline
    New Coder
    Join Date
    Jun 2002
    Posts
    62
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi JOSH,
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function catch_duplicates(s){
      for(i=0; i<s.length-1; i++)
         for(j=i+1; j<s.length; j++)
    	    if(s[i].selectedIndex==s[j].selectedIndex){
              alert("Selection from " + s[i].name +" same as\nselection from " + s[j].name + ".");
              return false; //cancel submission
    		}
    
      //...other validations here
    
      return true; //all inputs are valid
    }
    </script>
    </head>
    <body>
    <FORM action="script.php" method="POST" name="form" 
    onsubmit="return catch_duplicates(getElementsByTagName('select'));">
    select[apple] <SELECT name="select[apple]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT><BR><BR>
    select[orange] <SELECT name="select[orange]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT><BR><BR>
    select[banana] <SELECT name="select[banana]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    etc...<BR><BR>
    <INPUT type="submit" value="SUBMIT" />
    </FORM>
    </html>
    ( ) (• )
    >>V

    Mentor at WebXpertz Forums

  • #5
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Owl!

    Being a newbie to JS, I didn't know about the getElementsByTag thing. I had
    to tweak your code a little to get it to work on my form, but I got it figured
    out. One difference is that I have to call the function via onClick rather than
    onSubmit to make it consistent with all of my other form error checks.

    Here's how I merged your suggestion with my original function. This time, I'll
    include all of the vital code for more complete reference.


    Code:
    function catch_duplicates(s) {
      
      var errorMsg = '';
      
      buffer = new Array();
      count1 = 0;
      count2 = 0;
      for(i in s) {
        if(buffer[s[i].selectedIndex] != 1) {
          buffer[s[i].selectedIndex] = 1;
          count2++;
        }
        count1++;
      }
      if(count1 != count2) {
        errorMsg = 'Two or more selections are the same.';
      }
    
      // other error checks
      
      if(errorMsg) {
        alert(errorMsg);
      }
      else {
        document.form.submit();
      }
      
    }

    Code:
    <FORM action="script.php" method="POST" name="form">
    <SELECT name="select[apple]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[orange]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <SELECT name="select[banana]">
    <OPTION value="1">1
    <OPTION value="2">2
    <OPTION value="3">3
    </SELECT>
    <INPUT type="button" value="SUBMIT"
    onClick="catch_duplicates(form.getElementsByTagName('select'));">
    </FORM>

    Man... seeing the stripped down code above makes it look so simple!

    Thanks again for your help, Glenn and Owl. Hopefully, the resulting code
    above will help someone else too. I definitely learned something new.

    JOSH


  •  

    Posting Permissions

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