Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

formatting a textbox with a specific format

Posted on 2003-06-23
32
Medium Priority
?
11,761 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
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

824 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