am working on a project where the user needs to fill up a form in PHP.
Now while filling up the form I have added a button called "Add Another File & Remove" once this button is clicked a set of forms re-appears when Remove is clicked the newly added form will be removed .
Now my problem is I used tab index to navigate between the text box , when "Add Another File" is clicked a part of form reappears and now the tabindex moves to the beginning position and not to the newly placed text box of the form .
HTML coding of the form ::
<input type="text" id="filename1" tabindex="1" class="in-txt1" placeholder="* File Name">
<input type="text" id="length1" class="in-txt1 txt" tabindex="2" placeholder="* File Length">
<input type="text" id="speaker1" tabindex="3" class="in-txt1" placeholder="* Speaker">
</div>
<div class="in-row">
<input type="text" id="category1" tabindex="4" class="in-txt1" placeholder="* Category">
<input type="text" id="costmin1" tabindex="5" class="in-txt1 numeric txtt" placeholder="* Cost/Min">
<input type="text" id="cost1" tabindex="6" class="in-txt1 numeric" onpaste="return false;" ondrag="return false;" ondrop="return false;" readonly="true" placeholder="* Cost">
</div>
</p>
</div>
<input type="submit" name="addScnt" tabindex="7" style="width:180px;" id="addScnt" value="Add Another File" class="save-entry" />
<br /><br />
<div class="in-row"><br>
<input type="text" id="email" tabindex="8" placeholder="* Email ID" class="in-txt1">
<label class="in-txt1">Time Code <input type="checkbox" tabindex="9" id="time" style="float:right; height:20px; width:20px;"></label>
<label class="in-txt1">Verbatim <input type="checkbox" tabindex="10" id="verb" style="float:right; height:20px; width:20px;"></label>
</div>
<div class="in-row">
<textarea id="comment" class="in-txt1" tabindex="11" placeholder="* Comment"></textarea>
<label class="in-txt1">Rush <input type="checkbox" tabindex="12" id="rush" style="float:right; height:20px; width:20px;"></label>
</div>
<div id="invoice" tabindex="13" class="save-entry" style="margin: 8px -83px 0 0;width: 50px;">Submit</div><br>
<div align="center" class="msg" style="color: rgb(85, 85, 85);width: 400px;float: right;height: 44px;line-height: 44px;padding: 0 30px 0 0;"></div>
Jscript for the ADD ANOTHER FILE
<script type="text/javascript">
$(function() {
var scntDiv = $('#txtlength');
var i = $('#txtlength p').size() ;
$('#addScnt').live('click', function() {
$('<p> <label class="in-row"><input type="text" id="filename'+i+'" tabindex="7" class="in-txt2" placeholder="* File Name"><input type="text" id="length'+i+'" class="in-txt2 txt" tabindex="7" placeholder="* File Length"><input type="text" id="speaker'+i+'" tabindex="7" class="in-txt2" placeholder="* Speaker"></label><label class="in-row"><input type="text" id="category'+i+'" tabindex="7" class="in-txt2" placeholder="* Category"><input type="text" id="costmin'+i+'" tabindex="7" class="in-txt2 numeric txtt" placeholder="* Cost/Min"><input type="text" id="cost'+i+'" tabindex="7" class="in-txt2 numeric" onpaste="return false;" ondrag="return false;" ondrop="return false;" readonly="true" placeholder="* Cost"></label><input type="button" id="remScnt" value="Remove" class="save-entry1" /></label><br><br><br><br><br><br><br></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
try this..
$('#filename'+i).focus();
paste this code after append