Question

I have an issue i am trying to modify a form’s tab order which the HTML is out of my control, so i need to modify the code with JQuery to make the form tab in a way that i want.

here is the html code i cant change:

<div class="form1">
    <label>First Name</label>
    <input id="field1" class="field1" type="text" value="" name="Initials">
</div>

and i thought that this JQuery:

$(document).ready(function() {
        $("#field1").attr("tabindex","1");
});

would generate:

<div class="form1">
   <label>First Name</label>
   <input id="field1" class="field1" tabindex="1" type="text" value="" name="Initials">
</div>

yet i was wrog it did nothing.

there is alot more inputs i need to target and all with random ID’s 🙁

---

Additional information.

the form is generated by (i have changed some of the values but hope it makes sense):

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

</script>

adding the JQuery to the page does not target this code generated so i tried adding it within the script itself which too did not work:

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

$("#field-Initials").attr("tabindex","1");
$("#field-Surname").attr("tabindex","2");

</script>

Answer 1

yet i was wrog it did nothing.

No, it does exactly what you expect it to do. It sets the tabindex="1" attribute to an element with id="field1". It’s just that it does it directly into the DOM. If you look at the source code of the page you will see the original HTML as sent by the server. Use a DOM inspecting tool such as FireBug to see the modifications.

As far as the random ids are concerned, well, then it will depend on what order you would like to apply the tabindex. You could select all your input fields like this $('input') and then increment the tabindex but this way the index will be set in the same order in which inputs appear in the DOM so this might require tweaking based on your specific needs:

$(function() {
    $('input').attr('tabindex', function(index, attr) {
        return index + 1;
    });
});