Appending tabindex to input tag using JS/jQuery

Question

I am trying to set the tabindex for input fields but I don't have access to the HTML.

We are inserting a form that is generated from a third party. This form has two fields, postal code and email address, in that order. I want to rearrange them (without having to modify the field on the source platform) using CSS so email is above postal code, but obviously this messes up the tab order.

The inputs have name attributes of PostalCode and EmailAddress respectively. I know very little about JS so am trying to kludge this together from resources on the Internet and so far with no success.

I have tried the following but it doesn't work and I am obviously unable to figure out why or how to do it properly.

document.getElementsByName("EmailAddress")[0].setAttribute("tabIndex", "1");
document.getElementsByName("PostalCode")[0].setAttribute("tabIndex", "2");
document.getElementsByClass("at-submit")[0].setAttribute("tabIndex", "3");

Answer 1

This works.

Notice I just increment the element to have a higher index.

 const displayTabIndex = (name, { tabIndex }) => console.log(`${name} - ${tabIndex}`); document.addEventListener('DOMContentLoaded', () => { const tel = document.querySelector('input[type="tel"'); const pCode = document.querySelector('input[name="PostalCode"]'); displayTabIndex('tel', tel); displayTabIndex('pCode', pCode); pCode.setAttribute('tabIndex', 3); displayTabIndex('tel', tel); displayTabIndex('pCode', pCode); });

 <form> <input type="tel" name="tel" tabindex="2"> <input type="text" name="PostalCode" tabindex="1"> </form>