Jump to content

Virtual Fields - Go To Next Field After Input


Recommended Posts

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. 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...