[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?

[PeejAvery]

You need to use IDs instead of names. Names are no longer W3 standard when calling them from JavaScript.

<input type="text" name="theText" id="theText">
<script language="JavaScript">
  document.getElementById('theText').value = "Hello!";
</script>

[Nibinaear]

I can see that working, helps that it's a string as well, will post back.

Edited:
Beautiful, worked first time!

[PeejAvery]

Glad to hear it. Good luck with the rest!

[davidc2p]

Names are no longer W3 standard when calling them from JavaScript.

Could you please state your sources?
Thx.

[PeejAvery]

Could you please state your sources?
Thx.

Use any modern JavaScript debugger. Example: FireFox Error Console.

[davidc2p]

In my experience the getElementsByName function works in Firefox and not in IE... I'm trying to make things work, when possible, on both environment, but I'm not finding any information on the net stating a standard for client side programmation. W3 would be, but unfortunatly, they mixed old release with new so much that a cat wouldn't find its babies!