Follow Focus sequence after reloading page

Question

I have a page html, multi-field input, where I want to pass them in sequence using the tab key.
I used the tabindex="" to follow the correct sequence.
But one of these fields reloads the page to bring values from the database, according to the inserted id.
I need that, after reloading the page, the sequence continues from the last field where value was inserted, but what is happening is that the cursor goes back to the first input on the page. Does anyone know how I can solve this problem?

Thank you!

Answer 1

You can use JS to solve your problem.
Would look like this:

            $(function(){
                //Declara variável
                var focus_ok;
                //um laço para cada elemento 'input'
                $( "input" ).each(function( index ) {
                    //se o elemento tiver algum valor pega o id dele e armazena
                    if($(this).val()) focus_ok = $(this).attr('id');
                });
                //por algum motivo tive que concatenar o # do id
                focus_ok = "#"+focus_ok;
                //aplica o focus no último id coletado
                $(focus_ok).focus();
            });

            form{max-width: 300px;padding: 15px 15px;border:3px solid #9696ff;border-radius: 3px;margin: 5px;font-size: 16px;font-family: Arial;}
            form input{display: block;margin: 5px 0px;margin-bottom: 15px;width: 100%;border: 1px solid #9696ff;padding: 5px 0px;border-radius: 1px;}
            form input:focus{box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
            <label for="">Input 01</label>
            <input type="text" id="input_01" value="input_01">
            <label for="">Input 02</label>
            <input type="text" id="input_02" value="input_02">
            <label for="">Input 03</label>
            <input type="text" id="input_03" value="input_03">
            <label for="">Input 04</label>
            <input type="text" id="input_04">
            <label for="">Input 05</label>
            <input type="text" id="input_05">
        </form>