...

View Full Version : Count Characters in multiple form fields



viscep
01-01-2009, 12:11 PM
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



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, 12:55 PM
<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 (http://validator.w3.org/docs/help.html#validation_basics) one.

viscep
01-01-2009, 07:11 PM
<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 (http://validator.w3.org/docs/help.html#validation_basics) 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, 07:35 AM
:confused: I had tested it only in FF(2), and that worked for me. (It works in IE too)

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, 12:20 PM
:confused: 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, 09:08 AM
Here is the main piece of code, it does not work for Firefox or Opera



<!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, 09: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, 09:32 AM
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 (http://www.w3schools.com/jsref/jsref_onkeyup.asp). It might be due to the errors in OP's markup. Validate it and fix them (http://validator.w3.org/#validate_by_input).

tagnu
01-06-2009, 09:33 AM
Works fine in Firefox 3.0.5


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

itsallkizza
01-06-2009, 06:26 PM
<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum