Solved

Odd javascript behavior with this.value.replace(/[^\d]*/gi,"")

Posted on 2009-05-10
16
1,094 Views
Last Modified: 2012-05-06
Hello,

I am having some odd behavior with this function:
onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,"");'

it is part of a form that has something like this:
Time frame 1
start date
end date
billability (which is a percentage value, but i dont want the % sign, so the above code removes anything that's not a number)

I am using the above inside the percentage input field (as seen in the code)

I have a button that adds a new timeframe, and duplicates the code of the 1st timeframe but increments the id and name of the field
and using the same function for the date...
check the example code


now the problem :
in the initial input box, the code is working fine, it removes any non integer as soon as it is typed (letters or  % or anything)

but in the 2nd (and any added ones), i cant even type a number, it's automatically removed...

can someone point out to me what's causing this? thanks
// code in time frame 1

<input type="text" name="billability_1" id="billability_1"  onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,"");' >
 

// code time frame 2 after clicking 'add time frame'

<input type="text" name="billability_2" id="billability_2"  onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,"");' >

Open in new window

0
Comment
Question by:roynaufal
  • 6
  • 6
  • 4
16 Comments
 
LVL 5

Expert Comment

by:prokvk
ID: 24349376
Err ... so the second one you pasted is like generated or what ???
0
 
LVL 3

Author Comment

by:roynaufal
ID: 24349390
yea
u click an "add timeframe" button,

and the input elements are dynamically inserted into the form
and the resulting code is as above (it's the actual resulting code on the page)
0
 
LVL 5

Expert Comment

by:prokvk
ID: 24349748
Could you provide some link so I can look at it ?
0
 
LVL 3

Author Comment

by:roynaufal
ID: 24349790
http://212.36.203.182/booz/index.php
login using:  roy for username and naufal for password

then go in the menu to "staffing -> staff booking by project",
click 'add timeframe'

let me know when you check it...
because link is not permanent
0
 
LVL 5

Expert Comment

by:prokvk
ID: 24350065
When you generate that code of your input use slashes:

<input type="text" name="billability_2" id="billability_2"  onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,\"\");' >
0
 
LVL 5

Expert Comment

by:prokvk
ID: 24350067
Notice the slashes at the end, for the replacement
0
 
LVL 3

Author Comment

by:roynaufal
ID: 24350135
i did that
the version online now is bit messed , i was testing

but the code used to be the exact same javascript
i will check into it again,
this is the current JS function:

var gUniqueRowID = document.getElementById("no_rows").value; //gets row count from html form, starts with 1 and increments on each click

	current_rows = (gUniqueRowID * 1) + 1; //to parse as int, then inc
 

var gRowText = "<input type=\"text\" name=\"billability_#ROWID#\" id=\"billability_#ROWID#\"   onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,\"\");' />";
 

	str = gRowText.replace(/#ROWID#/g, "" + current_rows);
 

then the rest appends to the table

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24350174
I changed that row to this and it worked for me:
"<input type=\"text\" name=\"billability_#ROWID#\" id=\"billability_#ROWID#\" onkeyup='if(this.value.match(/\\D/))this.value=this.value.replace(/\\D/g,\"\");' onChange='this.onkeyup()' ><span id='available_billability_#ROWID#' ></span><br />"+

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 63

Accepted Solution

by:
Zvonko earned 100 total points
ID: 24350188
Oh! and now I see what your problem was!

This String:
onchange='this.value=this.value.replace(/[^\d]*/gi,\"\");'

Was not a regexp; it was a String!
It should be like this:
onchange='this.value=this.value.replace(/[^\\d]*/gi,\"\");'

To veryfy my explanation type into that field the letter: D
Because of the modifier "i" you can type also the lowercase: d

<|;-)


0
 
LVL 3

Author Comment

by:roynaufal
ID: 24350219
ah ok
i see i see
makes sense!
thanks


i'll test it out in the morning, going to sleep now!
will let you know how things go!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24350231
Come on! Give me my pointz! I will let you know ;-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24350256
;-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24350273
Thanks. One more note: try to change the input only when non-digit characters were found by testing with the match() for the meta char \D for non-\d  characters.
The advantage is that you do not disturb inserting of characters into middle of the value. Every assignment of field value moves the insert cursor to the end of the field value. That is seldom necessary but when needed can be very annoying. You see?
0
 
LVL 3

Author Comment

by:roynaufal
ID: 24350274
10x ;)
0
 
LVL 3

Author Comment

by:roynaufal
ID: 24350281
aha...okay
thanks
will note that
didnt think of it before :)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24350288
you are welcome.

Shalom
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now