I have two forms. First form search and insert.
But after hitting the button in search form, tabindex doesn't go to the first input in the insetform.
Note that there is a hidden div slide toggle in the search form where after the button the next tab will goes there.
<form id="searchform" name="searchform" method="get" role="form" tabindex="1">
<table>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td><input tabindex="1" id="name" placeholder="name" name="name" type="text"></td>
<td><input tabindex="2" id="company" placeholder="company" name="company" type="text"></td>
<td><input tabindex="3" id="persona" placeholder="persona" name="persona" type="text"></td>
<td><input tabindex="4" id="website" placeholder="website" name="website" type="text"></td>
<td> <a href="#" tabindex="5" class="btn btn-positive" id="searchlead"> Search </a></td>
<td> <a style="margin-right: 6px;" href="#" tabindex="6" class="btn btn-info" id="insert"> Insert </a></td>
</tr>
<tr class="slideTogglerow" style="display: none;">
<td><div>
From my list <input type="checkbox" name="search_own_list" style="margin: 8px;" id="search-own-list"/>
</div>
</td>
<td> <input type="text" name="date_inserted" placeholder="date" id="date_inserted"/></td>
</tr>
<tr>
<td>
<a id="advancesearch" href="#">
Advanced Search
<img src="assets/img/add-button.png"/>
</a>
</td>
<td colspan="5"> </td>
</tr>
</table>
</form>
<form id="insertform" name="insertform" method="get" role="form" tabindex="2">
<div class="row">
<p> Date: <i><?php echo date("M j, Y g:i a");?> </i></p>
<div id="major-fields">
<input type="text" tabindex="7" placeholder="First Name" name="fname" id="ifname">
<input type="text" tabindex="8" placeholder="Last Name" name="lname" id="ilname">
<input type="text" tabindex="9" placeholder="Company" name="company" id="icompany">
</div>
<label>Persona <br/>
<?php echo $persona_str;?>
</label>
<br/>
<label>Campaign <br/>
<select id="icampaign" name="campaign">
<option value="3">NorthAm</option>
<option value="1">APAC</option>
<option value="2">Canada</option>
<option value="4">UK</option>
</select>
</label>
<br/>
<label>Country <br/>
<select id="icountry" name="country">
<option value="2">USA</option>
</select>
</label>
<br/>
<label>Industry <br/>
<?php echo $industry_str;?>
</label>
<br/>
<label>
Status <br/>
<?php echo $status_str;?>
</label>
<br/>
</div>
<button id="slideToggle" type="button" class="btn btn-default">+ Add more information </button>
<br />
<div class="row slideTogglebox" style="display: none;">
<div id="minor-fields">
<input type="text" placeholder="website" name="website" id="iwebsite">
<input type="text" placeholder="email" name="email" id="iemail">
</div>
<input type="text" placeholder="position" name="position" id="iposition">
<input type="text" placeholder="phone" name="phone" id="iphone">
<input type="text" placeholder="address" name="address" id="iaddress">
<textarea placeholder="note" name="note" id="inote"></textarea>
</div>
<button type="button" class="btn btn-positive" id="insertlead" style="margin-top: 10px; width: 100%;"> INSERT </button>
</form>
Clicking on the “Search” link (it’s a link, even though you might format it to look like a button) does not cause the focus to change. It just moves to the start of the document (since it has href="#"). Since there is no focus change, that link stays focused. Pressing the TAB key would cause the focus to change, to the next focusable element (the “Insert” link).
If you would like to make a click on a link to affect focus, you need to do that with JavaScript:
<a href="#" tabindex="5" class="btn btn-positive" id="searchlead"
onclick="document.getElementById('insert').focus()"> Search </a></td>
You probably have some onclick handler for the link in your actual code. How you combine the focusing with the existing code depends on what it is supposed to do, but normally you would perform some search action, then do the focusing, and then e.g. return false to prevent normal link processing.