Passing form and field names to a function

Posted on 2012-08-15
Last Modified: 2012-08-15
Hi Experts,

I am trying to add javascript functionality that limits number of char in textarea.
I found this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <style type="text/css"><!--
 h1 { font-size: 140%; }
 blockquote dl { margin: 0; padding: 0; }
 <script type="text/javascript"><!--
 var limit = 8;
 function checkTypeLength() {
   if( > limit) {
     alert('Too much data!');;
     return false; }
     return true; 
 function updateCharType() {
   var old = document.f.counter.value;;
   if(document.f.counter.value > limit && old <= limit) {
     alert('Too much data in the text box!');
     if(document.styleSheets) { = 'bold'; = '#ff0000'; } }
   else if(document.f.counter.value <= limit && old > limit
	   && document.styleSheets ) { = 'normal'; = '#000000'; } 


 <!-- document.stepTwo.deceasedRelativeCauseOfDeath.
  f: stepTwo
  box: deceasedRelativeCauseOfDeath
 <form action=""
  name="f" onsubmit="return checkTypeLength();"> 
 <p>Please enter your message. The maximum number of characters
 allowed is 8, counting each end of line as two characters.
 If you fill out and submit this form repeatedly, you may
 wish to
 <input type="reset" value="clear"> it before starting
 to type a new message.</p>
 <textarea rows="4" cols="10" name="box"
 <p><small>(If you used a JavaScript enabled browser,
 preferably supporting JavaScript version 1.2 or equivalent
 (as supported e.g. by Internet Explorer&nbsp;4,
 Netscape Navigator&nbsp;4, and Opera&nbsp;5), you would have some help from
 the browser in trying to remain within the limit.)</small>
<script type="text/javascript" language="JavaScript1.2"><!--
 document.write('Characters typed: <input '+
  'type="text" size="3" name="counter" value=""'+
  'readonly onfocus=""> (limit: '+

 <p><input type="submit" value="Send">



Open in new window

I have many textarea and I want to modify javascript func so they can handle for all textarea.

Are there any way of passing form and field names to a function?

This didn't work for example:

 function updateCharType(counter) {

 var old = counter.value//<--didn't work!

<textarea rows="4" cols="10" name="box"

Open in new window

thanks in advance
Question by:dkim18
    LVL 2

    Accepted Solution

    In your onKeyUp attribute definition, you can pass "this", which will be the instance of the text area you're checking. In the code below, you can append "_counter" to the end of the id of the textarea so you can find it with JavaScript. It doesn't need a name attribute and that will prevent the counter value from being submitted with the rest of the form data.
    <textarea name="box" id="box" ... onKeyUp="updateCharType(this)"></textarea>
    <input type="hidden" id="box_counter" value="0">

    Open in new window

    That means that you don't have to go looking for the text area in updateCharType since it is now being passed to the function.
    function updateCharType(elementToCheck) {
      var old = elementToCheck.value;
      document.getElementById( + "_counter").value = old.length;

    Open in new window

    I hope this helps you get started towards a solution.

    Author Closing Comment


    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API ( has made its way into the popular lexicon of the English language.  A few years ago, …
    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now