• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

Passing form and field names to a function

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">
<HTML>
 <HEAD>
  <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; }
 --></style>
 <script type="text/javascript"><!--
 var limit = 8;
 function checkTypeLength() {
   if(document.f.box.value.length > limit) {
     alert('Too much data!');
     document.f.box.focus();
     return false; }
   else
     return true; 
}
 
 function updateCharType() {
   var old = document.f.counter.value;
   document.f.counter.value=document.f.box.value.length;
   if(document.f.counter.value > limit && old <= limit) {
     alert('Too much data in the text box!');
     if(document.styleSheets) {
       document.f.counter.style.fontWeight = 'bold';
       document.f.counter.style.color = '#ff0000'; } }
   else if(document.f.counter.value <= limit && old > limit
	   && document.styleSheets ) {
       document.f.counter.style.fontWeight = 'normal';
       document.f.counter.style.color = '#000000'; } 
   }
 //--></script>


 </HEAD>

 <BODY>
 <!--
 document.f.box: document.stepTwo.deceasedRelativeCauseOfDeath.
  f: stepTwo
  box: deceasedRelativeCauseOfDeath
  
   -->
 <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/chkarea3.pl"
  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"
 onkeyup="updateCharType();"></textarea><br>
 <noscript>
 <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>
 </noscript>
<script type="text/javascript" language="JavaScript1.2"><!--
 document.write('Characters typed: <input '+
  'type="text" size="3" name="counter" value=""'+
  'readonly onfocus="this.form.box.focus()"> (limit: '+
  limit+')');
 //--></script>

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

</div>


 </BODY>
</HTML>

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"
 onkeyup="updateCharType(document.f.counter);">

Open in new window


thanks in advance
0
dkim18
Asked:
dkim18
1 Solution
 
SamuelShawCommented:
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(elementToCheck.id + "_counter").value = old.length;
  ...
}

Open in new window

I hope this helps you get started towards a solution.
0
 
dkim18Author Commented:
thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now