Auto Tab in Date Field [RESOLVED]

Get Help
, ,
1

Hello

Is there a way i can get my date field to auto tab so that the user can punch in the date quicker?
date

Many thanks
Mat

2

There absolutely is. As far as I know it does require some custom JS though. Perhaps this tutorial can help in achieving what you want:

https://www.bluekeyinteractive.com/auto-tab-html-input-fields/

3

Thankyou Hiranthi, i’ve looked at this but it seems to be geard to HTML forms.

I’ll see what i can take from it though :+1:

4

Did you have any success with the above? Trying to execute something similar with time fields

5

I haven’t. It would need some custom code i guess.

6

I put together a demo that accomplishes this. Take a look at this page on my site:

[SITE REMOVED]

The Time and Date fields should auto-tab. Here’s how I accomplished what you see there.

  1. [Download the JSON of the form I used]([SITE REMOVED])

  2. Save that raw JSON and import that form into your site by going to Forms > Import/Export > Import Forms.

The script to initialize the auto-tabbing is present in the form already in the HTML field. It looks like this:

<script>
  jQuery( document ).ready( function( $ ) {
    $.autotab({ tabOnSelect: true });
    $( '#input_392_3_1, #input_392_3_2, #input_392_4_1, #input_392_4_2, #input_392_4_3' ).autotab( 'filter', 'number' );
  } );
</script>
  1. Change 392 in the script to the ID of your form after you import it on your site

Without including the jquery-autotab plugin, this form and the included init script won’t do anything. This is the jQuery plugin I used:

  1. Once I downloaded it and saved it on my site, I included it by adding this to a functionality plugin I use (you can use your theme functions.php if you like):
function add_autotab_script() {
    wp_enqueue_script( 'jquery-autotab-script', plugin_dir_url( __FILE__ ) . 'js/jquery-autotab/js/jquery.autotab.min.js', array( 'jquery' ), FALSE );
}
add_action( 'wp_enqueue_scripts', 'add_autotab_script' );

There are a lot of options for that script that I did not use, and a lot of other features are possible. They would all be added to the init script in the HTML field of the form. If you have any questions, please let me know.

Note: in general, that’s how you add any jQuery plugin/script functionality to your Gravity Forms form. You include the script in the head, and then initialize it with a script in an HTML field in the form.

4 Likes
7

Wow Chris you have gone above and beyond in helping with this and it works perfectly thank you!

1 Like
8

Excellent. I’ll leave this open in case anyone has any questions about implementing it.

1 Like