• 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

Focus for an html array input

 
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have an entry form that is dynamic (any number of items can be added.) The user clicks a button to add another entry. The html form field is an array. It works perfectly except I can not figure out how to change the focus through javascript.

My question is, what would be a way to change focus on an input that has is being built dynamically and has the same name? I want the latest created field to have the focus.

 
Sheriff
Posts: 67748
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

The html form field is an array.


There is no such thing as an array field. You'll need to explain what you mean by this.

Also, please indent your code. Using CODE tag is useless for unindented code.
 
Bear Bibeault
Sheriff
Posts: 67748
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
With regards to focus, simply use the focus() method.
 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is such a thing as an array on an html form... simply use <input type='text' value='Apples' name='fruit[]'> and <input type='text' value='Oranges' name='fruit[]'> and on the server side you can retrieve the value of fruit as an array. How would you set the focus on the second field (Oranges) using focus()?

 
Bear Bibeault
Sheriff
Posts: 67748
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 does not make it any sort of array in HTML. That's just a conventional notation for the server.

Obtain the element reference and call .focus().

 
Bear Bibeault
Sheriff
Posts: 67748
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.S. Using jQuery, it's trivial:



Using raw JavaScript, you'll need to do some traversal to find the correct element.
 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I don't know where to begin on traversing multiple elements with the same name.

The jQuery does look trivial - but keep in mind that the value would be blank... so I assume I would tell it to focus on a value that is blank, which doesn't sound like a good idea.
 
Bear Bibeault
Sheriff
Posts: 67748
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

if you know it's the last one. (In other words, there's myriad ways to slice and dice with jQuery to pick particular elements without resorting to traversal).

In raw JS, look into getElementsByTagName() and start iterating!
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


Eric
 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Getting very close... I am using a counter and reference it with:
document.inputform.elements["documents[]"][counter].focus();

Focus works the first time it adds a field in IE8, but when you add a third, forth, etc. field the focus doesn't change (just goes away). I don't get a JavaScript error.

It works every time in Firefox.


 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
And now I just realized that my method will clear any data entered each time a field is added. I need to come up with another way.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
View page source: http://www.pascarello.com/examples/createElement.html

Eric
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic