Put the Focus to table data element after form submit

Question

Code that is not working

$(document).ready(function() {
    if the action is successful and returns a success message then Only{
         document.getElementById("tabledataid_row").focus();
    }
});

Table data content

<table>
    <tr>
        <td id="tabledataid_row"></td>
    </tr>
</table>

I want to put the focus back to a table data <td> after the page has been submitted. For instance, in Struts action submit brings the form back to the top of the screen. I tried using the JavaScript method focus(), it works fine with textfield or elements of input type.

But it is not working when I assign an id to the <td> element and then pick it up in the form onload/document ready then call the focus() like this as above.

Please note that I have inserted tabindex at various places and this element id has tabindex 4. So, I dont want to change the tabindex to get the focus come to the id. Only the viewable page be shifted in such a manner that the required field gets visiable.

@Tushar - correct that the reason I am asking how he got to know focus is on td element ?? — Pranay Rana, Jul 09 '15 at 05:40
Just submit the form to `#tabledataid_row`, the browser will handle the rest. Doing a `` on page load should work too I think. — Mikk3lRo, Jul 09 '15 at 06:00
I have no idea what struts is, that's why I'm only commenting :p -Don't forget to mark dmlittle's answer as the solution if it solved your problem though. — Mikk3lRo, Jul 09 '15 at 06:32
@yeppe Only the person who downvoted can answer that, but typically you get downvoted for not asking a clear question, asking an off-topic question or showing that you made no effort to research the problem on your own... I would imagine your downvote is from someone who feels that it should be obvious to anyone that you can't set focus on a `` element (which as keizoms answer proves is not correct) — Mikk3lRo, Jul 09 '15 at 07:19

score 5 · Accepted Answer · answered Jul 09 '15 at 05:46

5

You can only focus on input elements. What you want to do is make sure the id is in the view. You can achieve what you want to do ('focusing' on a HTML element) using scrollIntoView().

document.getElementById("tabledataid_row").scrollIntoView();

answered Jul 09 '15 at 05:46

dmlittle

964
6
15

Ok it works in firefox let me check it in other browsers...:) – yeppe Jul 09 '15 at 06:03
bingo it works in IE8 ;).. @dmlittle thanks for a quick one! – yeppe Jul 09 '15 at 06:12

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

(stolen from https://stackoverflow.com/a/3656524/1222635)

Give the td a tabindex property. This gives it the ability to be focusable.

<td id="tabledataid_row" tabindex="-1"></td>

update:

Setting the tabindex to -1 makes it only focusable via script, meaning the user cannot tab to it.

edited May 23 '17 at 12:15

Community

1
1

answered Jul 09 '15 at 05:47

deleted user

824
1
7
11

@yeppe I don't quite understand what you mean by reserving tabindex for a separate use, but if you mean you don't want the user to be able to tab through the td, you can set tabindex to -1 and it will only be focusable by a script and not the user via tab. – deleted user Jul 09 '15 at 05:54
@keizom you should edit your answer to add the `-1` option. SO is a great resource for finding solutions to all kinds of problems - but when answering you should remember that a lot of people come here from google or other external sites, so your answer is not only for the OP... having to look through comments to find a possible solution is inconvenient (and comments may even be removed). – Mikk3lRo Jul 09 '15 at 06:37
@Mikk3IRo Done. Good advice for the future, thanks – deleted user Jul 09 '15 at 06:43

Put the Focus to table data element after form submit

2 Answers2