George K
asked on
Apply tab index in forms
I have the following javascript code which adds tabindex to all input elements in the html file
Everything is fine but it adds tabindex to all forms without reseting the counter. For example first first form
1,2,3,4,5,6....
then next form is 7,8,9,10...
My forms have the following format:
Can you please fix the javascript code so it will execute for each form separately?
$( document ).ready(function() {
var tabindex = 1;
$('input,select').each(function() {
if (this.type != "hidden") {
var $input = $(this);
$input.attr("tabindex", tabindex);
tabindex++;
}
});
});
Everything is fine but it adds tabindex to all forms without reseting the counter. For example first first form
1,2,3,4,5,6....
then next form is 7,8,9,10...
My forms have the following format:
<!-- member form -->
<form id="member-form" data-async method="POST">
<div id="member-form-modal" class="modal" data-keyboard="true" data-backdrop="static" >
<div id="member-form-dialog" class="modal-dialog modal-lg">
Can you please fix the javascript code so it will execute for each form separately?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
probably because in your example right after <form> you have an input while in my case there are lot of divs in the middleThat should not make any difference.
Post all your form code (multiple forms) and I will test with my code.
The reason it is not working for you is that your form is inside a modal which is hidden by default.
The test for input:not(':hidden') checks to see if the element itself is hidden rather than whether it has the attribute type="hidden" - so because the form is not visible it is ignoring those fields.
You can remedy like so. Note I have removed the test on select - not sure why you would have a type="hidden" on a select
Updated sample here
The test for input:not(':hidden') checks to see if the element itself is hidden rather than whether it has the attribute type="hidden" - so because the form is not visible it is ignoring those fields.
You can remedy like so. Note I have removed the test on select - not sure why you would have a type="hidden" on a select
$(function() {
$('form').each(function(i,a) {
var tabindex = 1;
$("input[type!='hidden'], select", $(a)).each(function(i,e) {
$(e).attr('tabindex', tabindex++);
})
})
});
Updated sample here
ASKER
The code works fine thanks
You are welcome.
ASKER
Open in new window
See the first and last line. There are lot of code in the middle. That's probably the reason your code not working in my side :(