Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

formatting a textbox with a specific format

Posted on 2003-06-23
32
Medium Priority
?
11,723 Views
Last Modified: 2012-06-27
hello,

i have a sort of validation that i need to implement in my form.

there are textboxes that should accept only numbers. as the user types the appropriate commas should appear accordingly.

example: the user types 25000 but in the text box it appears as 25,000 automatically.

i dont want the user to input points as there wont be any decimals in the values. he/she should only input the number.

could i get some help on it with javascript?

peace,
fmh002
0
Comment
Question by:fmh002
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 14
  • +1
32 Comments
 
LVL 2

Expert Comment

by:rdmjrb
ID: 8783618
Basically you would have a function that gets fired onKeyPress that firstly checks the user only types numbers and second checks the length and if the length is 3/6/9, etc then it sticks a ',' in the string.

This is a pretty complicated piece of javascript for only 30 points, however this is one of the best javascript sites I have come across: http://www.dynamicdrive.com that may help your cause.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8783766
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function formatZip(objFormField){
  intFieldLength = objFormField.value.length;
  if(intFieldLength==2){
       objFormField.value = objFormField.value + ",";
            return false;
  }
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <input type="text" name="zip" onKeyPress="formatZip(this)" maxlength="6">
</form>
</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8783787
disregard the function name

<script type="text/javascript">
<!--
function formatField(objFormField){
  intFieldLength = objFormField.value.length;
  if(intFieldLength==2){
       objFormField.value = objFormField.value + ",";
            return false;
  }
}
//-->
</script>
0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 16

Expert Comment

by:jaysolomon
ID: 8783795
 <input type="text" name="zip" onKeyPress="formatField(this)" maxlength="6">
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8783818
oooppppssss

  <input type="text" name="numField" onKeyPress="formatField(this)" maxlength="6">
0
 

Author Comment

by:fmh002
ID: 8787255
thnx for the link rdmjrb, i would have given it 60 points but im out of points right now.

jaysolomon!!! sup? i see you got what i wanted. your script works fine with maxlength=6. in my environment it is a bit difficukt coz the digits always exceed the max length=6. i live in a country where a dollar costs a 1000 shillings.

i would like to go to a maximum of 9. could you help me with the commas? it's working fine right now coz in my question i gave a 6 digit example. i see my mistake.

thnx once again jaysolomon

fmh002
0
 

Author Comment

by:fmh002
ID: 8787274
i've also noticed that if i type in 2500 it gives it a comma as well -> 25,00... ooops.
0
 

Author Comment

by:fmh002
ID: 8788416
i'd also like have only numbers entered. at the moment there is no restriction on the input in your script.

peace,
fmh002
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8788752
here is a link that may be very helpful.

Try it out and if you still need help just let me know. I will continue to write a shorter script.

jAy
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8788779
sh!t i forgot the link brb....
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8788794
http://www.mredkj.com/javascript/numberFormat.html#tryit

there is the link

after you look at that and if you decide to go that route, we can then see your form and create the Number Only function
0
 

Author Comment

by:fmh002
ID: 8790425
sup jaysolomon

wow that script on that page is quite complex and trying to customize it for my form is way beyond my capabilities. but there's a setback, that try it button does the formatting. i am sure there must be a way to make that function trigger onkeypress or something? dont you think so? well, i have decided to go that route but that button shouldn't do the function, it should be done on the textbox itself.

peace
fmh002
0
 

Author Comment

by:fmh002
ID: 8790442
that script has many functions, could you make it shorter? do only the comma placements
0
 

Author Comment

by:fmh002
ID: 8798621
people i need help, i've increased points for that matter...

peace
fmh002
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8798689
is this going to be a currency format, or do you just want a comma

also is it always 5 numbers or what is the max amount of numbers
0
 

Author Comment

by:fmh002
ID: 8798777
i just want a comm and my max amount of numbers could be 9,999,999
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 280 total points
ID: 8800470
try this

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function addCommas() {
var x = document.forms[0];
var objRegExp  = new RegExp('(-?[0-9]+)([0-9]{3})');
    while(objRegExp.test(x.fieldName.value)) {
       x.fieldName.value = x.fieldName.value.replace(objRegExp, '$1,$2');
    }
}
//-->
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <input type="text" name="fieldName" onChange="return addCommas();">
  <input type="text" name="textfield">
</form>
</body>
</html>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8800477
i tried using onKeyPress, but it got screwed up
0
 

Author Comment

by:fmh002
ID: 8804472
thnx jaysolomon,

now i can atleast say that look, the commas do appear!

thnx man,
fmh002
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8804801
Uh why the grade of a "C"?

You asked for commas, thats what you got
0
 

Author Comment

by:fmh002
ID: 8806248
hey man im sorry for grading a C on that. i'd make it up to you if you could help me with some other problem i got.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8806286
you can post a Question in Community Support asking them to change this grade.

Now whats the Problem?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8806469
Response.Write "<SELECT name=studentid onchange=""studentname.value = this.value;"">"


I think it should be like so

Response.Write "<SELECT name=studentid onchange='this.form.studentname.value = this.value;'>"

and

Response.Write "<SELECT name=studentname onchange='this.form.studentid.value = this.value;'>"


This is contredicting itself to me

and this is why you are getting the same results in the 2 DB fields
0
 

Author Comment

by:fmh002
ID: 8806474
i have already posted on the community support, jay am i ok with u now?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8806538
no problem man

BTW, i don't know how the mods or admins will act when they  see the link to the other forum, so wait and see.

Did you understand the post about the problem
0
 

Author Comment

by:fmh002
ID: 8806561
i tried changing the code to the one you gave and it's still posting the same value (studentid) to both of the fields
0
 

Author Comment

by:fmh002
ID: 8806589
i am trying what that mohecan guy suggested, let me c if that works
0
 

Expert Comment

by:YensidMod
ID: 8808166
Grade will be changed from C to A per fmh002 request.

YensidMod
EE Moderator
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8808201
:>)

thanks
0
 

Author Comment

by:fmh002
ID: 8812492
jay it's working now. i tried chaging the code to what mohecan suggested and the posting's fine now.

im sorry for the points thing man. thnx
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 8812859
No problem

Happy Programming
0

Featured Post

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

715 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