• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Focus for an html array input

 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • 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.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64719
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64719
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64719
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64719
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Pie
Posts: 64719
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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!
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator


Eric
 
Chris Huber
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • 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
  • 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
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
View page source: http://www.pascarello.com/examples/createElement.html

Eric
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic