This topic is locked

Modifying the tabindex order

3/12/2017 3:04:52 PM
ASPRunnerPro Tips and tricks
G
georgeb author

I always thought the tab-index order on a form should adhere to the order in which the Fields were listed on the "Fields Order and Totals" page. This does not appear to always be the case and has resulted in many inquires about how to change tab-index orders on a form.
this process appears to work only in free form mode as there are no individual begin and end edit control tags only begin and end for all controls

Regular Mode

{BEGIN EndTime_fieldblock}

<DIV class="container">

<DIV class="form-group {$fielddispclass_EndTime}" data-signal-error-for="EndTime{$id}" data-fieldname="EndTime">

<LABEL class="col-md-3 control-label" for="{$labelfor_EndTime}">

{BEGIN EndTime_label}

{$label dbo_RaceQuotes EndTime}

{END EndTime_label}

</LABEL>

<DIV class="col-md-6">

{$EndTime_editcontrol}

</DIV>

<DIV class="col-md-3 help-block" data-helpfor="EndTime">

<DIV class="text-muted">

{$tooltip dbo_RaceQuotes EndTime}

</DIV>

</DIV>

</DIV>

</DIV>

{END EndTime_fieldblock}
Free Form Mode

<DIV class="rnr-ff-cwrap {$fielddispclass_EndTime}" style='left: 255px; top: 59px; line-height: 1.4285; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 700; position: absolute;' data-fieldname="EndTime">

{$label dbo_RaceQuotes EndTime}

</DIV>

<DIV class="rnr-ff-cwrap {$fielddispclass_EndTime}" style='left: 346px; top: 50px; line-height: 1; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="EndTime">

{$EndTime_editcontrol}

</DIV>

<DIV class="rnr-ff-cwrap" style='left: 831px; top: 55px; line-height: 1.4285; font-family: "Ubuntu",Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; position: absolute;'>

{$tooltip dbo_RaceQuotes EndTime}

</DIV>
each control on the page has three "Sections"

label

control

tooltip
they are referenced in the editor page (HTML mode) as

<DIV class="rnr-ff-cwrap {$fielddispclass_StateProvinceId}" style='left: 380px; top: 80px; line-height: 1.4; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="StateProvinceId">

{$label QuoteWizardStep2 StateProvinceId}

</DIV>

<DIV class="rnr-ff-cwrap {$fielddispclass_StateProvinceId}" style='left: 380px; top: 100px; line-height: 1; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; font-style: normal; font-weight: 400; position: absolute;' data-fieldname="StateProvinceId">

{$StateProvinceId_editcontrol}

</DIV>

<DIV class="rnr-ff-cwrap" style='left: 380px; top: 130px; line-height: 1.4; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; font-style: normal; font-weight: 400; position: absolute;'>

{$tooltip QuoteWizardStep2 StateProvinceId}

</DIV>
cutting these three sections and pasting in the location relative to the order you wish your tab-index to work will change the tab-index but not the display order.
Again it works in Free Form Mode and is a hack for certain......but easier than writing 50 lines of javascript onload code....... <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=question&id=24541&image=1&table=forumtopics' class='bbc_emoticon' alt=':)' />
George Benson