File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Focus for an html array input Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Focus for an html array input" Watch "Focus for an html array input" New topic
Author

Focus for an html array input

Chris Huber
Greenhorn

Joined: Mar 26, 2009
Posts: 15
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

Joined: Jan 10, 2002
Posts: 60055
    
  65

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60055
    
  65

With regards to focus, simply use the focus() method.
Chris Huber
Greenhorn

Joined: Mar 26, 2009
Posts: 15
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

Joined: Jan 10, 2002
Posts: 60055
    
  65

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

Joined: Jan 10, 2002
Posts: 60055
    
  65

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

Joined: Mar 26, 2009
Posts: 15
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

Joined: Jan 10, 2002
Posts: 60055
    
  65


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

Joined: Nov 08, 2001
Posts: 15376
    
    6


Eric
Chris Huber
Greenhorn

Joined: Mar 26, 2009
Posts: 15
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

Joined: Mar 26, 2009
Posts: 15
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
View page source: http://www.pascarello.com/examples/createElement.html

Eric
 
Consider Paul's rocket mass heater.
 
subject: Focus for an html array input
 
Similar Threads
simple javascript form
cant find the error
unable to connected to next page
Problems with form validation
Assinging JavaScript variable as a textbox id