• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Using jQuery's "event.target" property to obtain value without referring to tag ID

 
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am trying to capture the value typed by user into an <input type="text"... /> tag without referring to the tag's ID. There are numerous of these tags on the page.

I added this event attribute inside all the input tags --> onchange="return validateNumber(this)"

Onchange works great and fires the moment a user clicks outside the tag after changing its current value.

My validateNumber script will evaluate the new text against various criteria, but I'm having trouble getting the new (changed) value of that particular tag.

I read about jQuery's "event.target" that returns which DOM element triggered the event, and it seems this would allow me to obtain the value in the cell that the user just changed.

Here's my script:



jQuery is installed and works fine (I can step through it with the debugger). There are no crashes but the debugger says variable currentFieldText is "undefined."

I also tried using --> $(event.target).text(); --> got same result (undefined variable)

How can I capture that text without using getElementById(xx).value? Thanks for your help!
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You need to use jQuery to establish the event handler, not onchange.

Bottom line: if you are going to use jQuery (recommended), use jQuery.

P.S. You can also get the target without jQuery, but it's a cross-browser pita; I recommend the jQuery approach.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
P.P.S. Your instinct is good; using hard-coded id's is to be avoided.

P.P.P.S. Depending upon how you establish the handler, the target is also sometimes available as the function context (this).
 
Jim Borland
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have no idea how to do this (use jQuery to establish the event handler, not onchange). Would you please give me a hint or a push in the right direction. Thank you!
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You should pick up a copy of jQuery in Action, 3rd Edition (which is in early access program).

You should not be putting any script mixed into the HTML markup (in other words, no "on" attributes) -- this technique is known as Unobtrusive JavaScript, and it's a basic tenet of modern web development.

You should establish a jQuery ready hander (which fires off when the DOM is ready for scripting), and use jQuery's .change() method to establish the hander.

The basics are as follows:



Note that if you want to establish this handler for multiple controls in the form, you can establish the change handler on the form -- the event will bubble up from the controls to the form, and event.target will be the element that triggered the event.

Or you could just make a selector that selects all the elements that you need monitored.

Get yourself a good jQuery tutorial (or my book). Life is too short to write raw JavaScript without jQuery assist.
 
Jim Borland
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, I will dive in and figure this out. Thank you VERY MUCH for the instruction and for the encouragement.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Good deal! You know where to ask questions!
 
Jim Borland
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I've made great progress in my quest but have hit the wall in one regard. Here is an expanded review of my situation:

(1) need to capture the value typed by user into an <input type="text"... /> tag.

(2) the value must be a positive number so need to check (a) is number? and if so, (b) is it positive? Here is my code (runs inside the ready handler):



The event handler runs when the user clicks outside the current text box (if the content was changed). If the new value is not a number or is a negative number, focus returns to the problem text box and an alert pops up. That all is working great! However, I have one little problem.

After focus is returned to the problem text box, if the user then clicks somewhere else without making the necessary alteration to the incorrect text, nothing happens and the incorrect text is preserved. The reason is that this time nothing "changed" so the event handler did not react.

Looking for ideas here. How can I force the user to fix the problem text before being able to leave that text box? Thank you very much for helping me with this!





 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You might want to check out the jQuery validation plugin; it'll save you a lot of work in the long run.

Or, you might also want to make the element(s) of type "number" rather than "text". That will enforce the numeric constraint in all modern browsers.

Outside of the above, you not only need to check the input values on change, but on form submission. You can capture form submission with a submit handler on the form. But I'd urge you to look into the above rather than rolling your own validation.
 
Jim Borland
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I've been experimenting with using elements of type "number," and it's pretty cool! Thanks for the introduction. Problem is, when I input something other than a number, nothing happens to alert the user of their mistake until they press submit. There are many such elements in my form and I would like the user to know immediately when they do something wrong, rather than waiting for their submit.

The event handler code which I input above works great for this purpose except for the fact that it does not lock the user into the problem element until such time as they fix their mistake. Still looking for ideas on how I can make this happen. Thank you!
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
That would be considered really really bad UX. I do not recommend that approach at all. In fact, I strongly urge against it.
 
Jim Borland
Ranch Hand
Posts: 34
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Okay, so "locking" a user in the cell until they fix their mistake is not a good idea. Here's another thought. What if I could restore the previous value when the user changes it to something other than a positive number. In other words, there is a valid number in the cell now but user changes it to text, so the alert pops up and the cell's value automatically reverts to the previous valid number.

The code "$(event.target).val()" grabs the value after the change, but is there some way I can recover the value in that cell before the change was made? I could then do --> "$(this).val(previous value);" to put it back and replace the improper text. Any suggestions for how I could do this? Thank you!
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Jim Borland wrote:Okay, so "locking" a user in the cell until they fix their mistake is not a good idea


No. Not at all.

Here's another thought. What if I could restore the previous value when the user changes it to something other than a positive number. In other words, there is a valid number in the cell now but user changes it to text, so the alert pops up and the cell's value automatically reverts to the previous valid number.


In my opinion. you are overthinking the whole thing -- and in the process, breaking every UX rule in the book.

How I think a form should behave is to simply mark the field as in error, and prevent submission until the field is fixed. Communicating the reason for the error is important, and highlighting fields in error is helpful. The HTML5 number input will display a helpful flyout and highlight.
reply
    Bookmark Topic Watch Topic
  • New Topic