[RESOLVED] Online Submission System (Javascript)

[Nibinaear]

I'm developing a website whereby you submit a number of submissions for a particular award. So for example the European Award might have criteria like: "Quality of Service" and "What technologies support the services?".

Each of these is given a textarea box so that the user can add their own submission for each one. Each textarea has a word limit/character limit box beneath it so that the user knows when they have gone over the limit for each one.

What I need to be able to do is update each word limit box when the textarea changes (I'm sure you've seen this kind of thing elsewhere on the web) so that it counts the number of words.

I've got most of it sorted out, but because the form will change (any number of textareas, I need to be able to alter the correct word limit box for each textarea. The word limit boxes have names like limit_1, limit_2 etc, depending on how many their are (there might be 2-10 of them.) The textareas have names like criteria_1, criteria_2 etc..

I'm having trouble getting the function to update the word limit box for each one, it just says "element has not properties" in firefox.

My JS file function is below (element=textarea,counter=wordcounter box,chars=max chars allowed for field.):

    <script language="Javascript" type="text/javascript" >
      <!--
        function updateWords(element,counter,chars)
        {
           //update the word counter
           document.sub.counter.value=element.value.length;

           //set bg color to white every time.
      document.sub.counter.style.backgroundColor="#ffffff";
                    

          //Take off any characters longer than allowed (works).
          if(element.value.length>chars)
          {
              element.value=element.value.substring(0,(chars-1));
              document.sub.counter.style.backgroundColor="#194fff";
          }
        }
    -->
    </script> 

I've tested all that by changing the value of counter to the hard coded value of limit_1 for example and it works, but when I pass it in like below it doesn't work. Below is a loop which loops around adding the criteria:

$query="a query to get back the criteria I need.";

        $counter=1;

        if($result=mysqli_query($dbl,$query))
        {
              if(mysqli_num_rows($result)>0)
              {
                echo "<form id=\"sub\" name=\"sub\" method=\"post\" action=\"update_marks.php?entrant_award_id={$_GET['entrant_award_id']}\" />";
            
                while($criteria=mysqli_fetch_array($result))
                {
                  $submission=$criteria['submission'];
                  $submission = str_replace("<br />", "\r\n", $submission);
                  $submission = str_replace("<p />", "\r\n\r\n", $submission);
                  
                  echo "<h5>{$criteria['criteria_name']}</h5>\n";
                  echo "".$criteria['criteria_info']."...<p />\n";
                  echo "Your Submission (character limit applies)<br />\n
                  <textarea name=\"criteria_$counter\" style=\"width:80%;height:300px;margin-bottom:5px;\" onKeyup=updateWords(this,document.sub.limit_$counter,{$criteria['word_limit']});>$submission</textarea><br />\n";
                  echo "Characters Used <input onLoad=\"javascript:this.value=0;\" onFocus=\"this.blur()\" type=\"text\" style=\"width:30px;text-align:center;\" id=\"limit_".$counter."\" /> / {$criteria['word_limit']}\n\n\n";
                  $counter++;
                  
                  /*
                  if($criteria['finished'])
                  {
                    echo "Finished Writing? (can edit later) <input type=\"checkbox\" name=\"finished\" value=\"finished\" CHECKED />";
                  }
                  else
                  {
                    echo "Finished Marking? (can edit later) <input type=\"checkbox\" name=\"finished\" value=\"finished\" />";
                  }              
                  */
                  
                  echo "<input type=\"hidden\" name=\"entrant_award_id\" value=\"{$_GET['entrant_award_id']}\" /> ";
                  echo "<p />";
                }
                
                echo "<div style=\"text-align:center;margin-top:50px;width:80%;\"><input type=\"submit\" name=\"submit\" value=\"Update Submission\" class=\"SubmitButton\" /></div>";
                echo "</form><p />";
              }
              mysqli_free_result($result);
          } 

Sorry if this is hard to understand. COULD SOMEONE PLEASE MOVE THIS TO SERVER SIDED SCRIPTING?