Count Characters in multiple form fields

viscep · 01-01-2009, 11:11 AM

I am having problems counting the characters as a user types in multiple fields in a form. It should add both fields together and output the total. The best I have been able to do so far is get it to count the first field, but when I type in the second field, it does not update until I type in the first field again. All help is much appreciated

Code:

function countChar(title,message,f)
{	
	f.count.value = title + message;
}


<input type='text' name='title' onkeyup="countChar(this.value.length,message.value.length,this.form)">
		
<textarea name='message'  onkeyup="countChar(this.value.length,title.value.length,this.form)" ></textarea>

You've typed <input size='3' type="text" name="count" value="0"> characters

abduraooft · 01-01-2009, 11:55 AM

Code:

<script type="text/javascript">
function countChar(title,message,fObj)
{	
	fObj.count.value = title + message;
}

</script>
<form onkeyup="countChar(this.title.value.length,this.message.value.length,this);">
<input type="text" name="title" >
		
<textarea name="message" ></textarea>

You've typed <input size="3" type="text" name="count" value="0"> characters
</form>

PS: always use double quotes to wrap attribute values ,to make your markup valid one.

viscep · 01-01-2009, 06:11 PM

Quote:

Originally Posted by abduraooft

Code:

<script type="text/javascript">
function countChar(title,message,fObj)
{	
	fObj.count.value = title + message;
}

</script>
<form onkeyup="countChar(this.title.value.length,this.message.value.length,this);">
<input type="text" name="title" >
		
<textarea name="message" ></textarea>

You've typed <input size="3" type="text" name="count" value="0"> characters
</form>

PS: always use double quotes to wrap attribute values ,to make your markup valid one.

Thank you for the help. It works fine using Internet Explorer but it does not work with firefox. Any idea how to make it work with firefox? Thank you very much

abduraooft · 01-02-2009, 06:35 AM

I had tested it only in FF(2), and that worked for me. (It works in IE too)

Quote:

It works fine using Internet Explorer but it does not work with firefox.

Could you explain "does not work " ? Are you getting any errors?

viscep · 01-02-2009, 11:20 AM

Quote:

Originally Posted by abduraooft

I had tested it only in FF(2), and that worked for me. (It works in IE too)
Could you explain "does not work " ? Are you getting any errors?

I'm using FF3. In firebug it says prototype undefined. It doesn't count any characters, the count value stays at 0.

viscep · 01-06-2009, 08:08 AM

Here is the main piece of code, it does not work for Firefox or Opera

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript">

function countChar(title,message,f)
{	
	var t = title;
	var m = message;
	f.Count.value = "$" + (t + m) * 50;
}

</script>

<form method="post" onkeyup="countChar(this.title.value.length,this.message.value.length,this);">
	<tr>
		<td width="15%"><b>Title</b>:</td>
		<td width="85%">
		<input type="text" name="title" size="35" maxlength="30">
		</td>
	</tr>

	<tr>
		<td width="15%"><b>Message</b>:</td>
		<td width="85%">
		<textarea name="message" cols="55" rows="6" ></textarea>
		</td>
	</tr>

	<tr>
		<td width="15%"><b>Cost</b>:</td>
		<td width="85%">
		<input size="5"  name="Count" value="0">
		<input style="margin-left:10px;" type="submit" name="ad" value="Submit"></td>
	</tr>
	</form>

Thanks for your help

Kor · 01-06-2009, 08:13 AM

There might another issue: title could be a reserved javascript word (see: document.title) in some browsers. Change the name title in Title, or whichever.

Another thing: onkeyup should not be supported by a FORM element (AFAIK). Maybe you could use onsubmit and return a Boolean.

abduraooft · 01-06-2009, 08:32 AM

Quote:

Another thing: onkeyup should not be supported by a FORM element (AFAIK). Maybe you could use onsubmit and return a Boolean.

I don't think so. It might be due to the errors in OP's markup. Validate it and fix them.

tagnu · 01-06-2009, 08:33 AM

Works fine in Firefox 3.0.5

Quote:

Originally Posted by viscep

Here is the main piece of code, it does not work for Firefox or Opera

itsallkizza · 01-06-2009, 05:26 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function countChar()
	{
	var tform = document.getElementById("my_form");
	tform.count.value = tform.title.value.length*1+tform.message.value.length;
	}

// ]]>
</script>
</head>
<body>

<form id="my_form" onkeyup="countChar();">
	<input type="text" name="title" />
	<textarea name="message"></textarea>
	You've typed <input size="3" type="text" name="count" value="0" /> characters
</form>

</body>
</html>

Passing parameters into an event handler that is supposed to also pass the Event object (like onkeyup) can be finicky because the first parameter (arguments[0]) can be Event (as opposed to whatever parameter you think you're passing). I've never had a problem with this before because afaik dev parameters take precedence - but I could be wrong, just a thought.