Virtual Fields - Go To Next Field After Input

[kpcollier]

I have a few virtual text fields on my submission form. I am trying to find a script that will automatically go to the next field when the previous one is filled. 

I wasn't too sure where to start with this, so I started with a stackoverflow article. 

$('*[class*="cbParamVirtual"]').keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('*[class*="cbParamVirtual"]');
      if ($next.length)
          $(this).next('*[class*="cbParamVirtual"]').focus();
    }
});

Obviously it is a bit different because not all of my inputs share the same class. Also, I have a few other virtual fields that should not be included in this workflow, although these fields are dropdowns and calculated fields, so I am not sure if the script would mess with them or not. 

Either way, I couldn't get this to work. 

[kpcollier]

Here is a CodePen example of the code above working on simple input elements. Just trying to get this to work on my datapage. I get no errors, just nothing happening. I have a feeling it is because every input element is wrapped in a div. I might just have to write a script for every step, i.e. if cbParamVirtual1 length = 2, go to cbParamVirtual2, and so on.

[TellMeWhy]

I'm not versed in jQuery terms but I got this working with the following.

 

First include the cdn of jquery on your Header, you get no errors, so, that means you already have it included, but for anyone who might need it 

HEADER > DISABLED HTML EDITOR

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

FOOTER

If you want to go through every input, then use 'input' instead of cbParam

What the code in the if does is it goes to the parent element of the current input (it goes to div) then searches the NEXT siblings(other divs, it will not go up) with children who has <input> element, and the first one (.find()) it sees, it will focus.

<script>

$('input').keyup(function () {

 if (this.value.length == this.maxLength) {

$(this).parent().nextAll().children('input').first().focus();

    }
});

</script>

 

If only Virtual Fields, cbParam is not used in class, but ids and name, you may use the following:

<script>

$('input[name*="cbParamVirtual"]').keyup(function () {

 if (this.value.length == this.maxLength) {

$(this).parent().nextAll().children('input[name*="cbParamVirtual"]').first().focus();

    }
});


</script>

I don't really do jQuery, so, I'm sure there's much better way than this, but, this one works, so why not.

[kpcollier]

@TellMeWhy Thank you, I appreciate the help. It is always awesome to see a solution and how it is done after working on it for a while.