How to define a sequence input fields?

Hey Bubblers!
Wanted to share a solution we found, when the default tab order set by Bubble is not working as expected (especially when a repeating group with inputs and auto-binding is used so that the number of inputs is not known from the beginning.

  1. Attach the Jquery library to the app by pasting this code

<script src=""></script>
in the settings->seo&metatags->script/metatags in header (see screenshot below)

  1. Insert an html element on a page, make it hidden and insert this code into it:
    <script type="text/javascript">  
>          $(function() {
>             var tabFix = function(){
>               // Handler for .ready() called.
>               $("input, select, button").each(function (i) { 
>                 $(this).attr('tabindex', "");
>                 //$(this).css({"border": "red solid 3px"});
>               });
>             }
>             setTimeout(tabFix, 1000);
>             var tabFixInterval = setInterval(tabFix, 200);
>           });
>         </script>

see example

This code resets the default order set by Bubble and does it so every 200 ms, to make sure that all new inputs
that might be added through repeating group will be also reset



Founder at Bubblewits - Bubble Certified Partner – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc. - one page Bubble demo - Collection of apps built on Bubble