Link to home
Start Free TrialLog in
Avatar of George K
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

    $( document ).ready(function() {
        var tabindex = 1;
        $('input,select').each(function() {
            if (this.type != "hidden") {
                var $input = $(this);
                $input.attr("tabindex", tabindex);
                tabindex++;
            }
        });
    });

Open in new window


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">

Open in new window


Can you please fix the javascript code so it will execute for each form separately?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of George K
George K

ASKER

Well, it works great in your example but not in my page probably because in your example right after <form> you have an input while in my case there are lot of divs in the middle:

                        
<!-- start form -->
				<form id="start-form" data-async method="POST">
					<div id="start-form-modal" class="modal" data-keyboard="true" data-backdrop="static" >
						<div id="start-form-dialog" class="modal-dialog modal">
							<div class="modal-content">

								<div class="modal-header grey-bg bold">
									<button type="button" class="close white" data-dismiss="modal"><i class="icon-cancel-square"></i></button>
									<h5 class="panel-title float-left"><i class="icon-plus2 pr-5"></i> START CLIENT</h5>
								</div>

								<div class="modal-body">


									<div class="form-group">
										<div class="row">

											<div class="col-sm-4">
												<label>CLIENT</label>
												<select multiple="multiple" class="select-start-client" id="id_client" name="id_client"></select>

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 :(
probably because in your example right after <form> you have an input while in my case there are lot of divs in the middle
That 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
$(function() {
   $('form').each(function(i,a) {
       var tabindex = 1;
       $("input[type!='hidden'], select", $(a)).each(function(i,e) {
         $(e).attr('tabindex', tabindex++);
       })
   })
});

Open in new window


Updated sample here
The code works fine thanks
You are welcome.