Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Count Characters in multiple form fields

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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.

  • #6
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    Last edited by Kor; 01-06-2009 at 09:28 AM. Reason: title, onkeyup
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Works fine in Firefox 3.0.5

    Quote Originally Posted by viscep View Post
    Here is the main piece of code, it does not work for Firefox or Opera
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #10
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Last edited by itsallkizza; 01-06-2009 at 05:29 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •