How to define a sequence input fields?

Need help
29

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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the settings->seo&metatags->script/metatags in header (see screenshot below)

image.png2789×754 116 KB

  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

image.png692×737 42.4 KB

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

Enjoy:slight_smile:

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtwithoutcode.com/ - Collection of apps built on Bubble

11 Likes