contact form 7 auto tab to next field-CodePudding

I am using Contact Form 7 for a questionnaire and one question asks for Date of Birth. I tried using the date picker and text input field to auto format the date but it will not work the way I want it to. The date picker will not limit the year to 4 digits and the text input will not format to MM / DD / YYYY correctly so what I have done is created 3 separate inputs:

[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"] 
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]

Now I am simply trying to auto tab to the next field when the user enters info into a box. So when they enter in 2 digits for month the cursor jumps to the day input field and they enter the 2 digits for day and it jumps to the year automatically. I have tried this with no luck:

<script>
$(".dob-month").on("keyup", function () {
$(this).next('.dob-day').focus(); });
$(".dob-day").on("keyup", function () {
$(this).next('.dob-year').focus(); });
</script>

I have tried this with no luck:

${".inputs").keyup(function(){
$(this).next(".inputs").focus(); });

I have tried this with no luck:

$(".inputs").keyup(function (field, autoMove) {
    if (field.value.length >= field,maxLength){
        document.getElementByClass(autoMove).focus();
    } });

I just want it to automatically jump to the next field and I cannot find a solution. Any help would be greatly appreciated and maybe I just have the syntax wrong but either way I cannot get any of these to work.

Here is the HTML for the column of that section:

<div class="grve-container">
 <div class="grve-row grve-bookmark grve-columns-gap-30">
  <div class="grve-column wpb_column grve-column-1-2">
   <div class="grve-column-wrapper">
    <div class="grve-element grve-text">
     <label>Date of Birth</label>
      <div class="grve-row grve-bookmark grve-columns-gap-0">
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-month minlength:2 maxlength:2 class:inputs placeholder "MM"]
         </div>
        </div>
       </div>
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-day minlength:2 maxlength:2 class:inputs placeholder "DD"]
         </div>
        </div>
       </div>
       <div class="grve-column-1-3">
        <div class="grve-column-wrapper">
         <div class="grve-element grve-text">
[text* dob-year minlength:4 maxlength:4 class:inputs placeholder "YYYY"]
         </div>
        </div>
       </div>
      </div>
    </div>
   </div>
  </div>
</div>

UPDATE: so I have been playing around with the code and this is almost working. When I input text into a field it does console log "hello" so there is something wrong with the last line of this code:

jQuery('.inputs').keyup(function () {
    if (this.value.length >= this.maxLength){
        console.log("hello");
        jQuery(this).next('.inputs').focus();
    } });

Also I have come to realize the $ is not recognized by CF7, you have to actually put jQuery for it to recognize the input for some reason but this function is logging "hello" when I input text into these 3 fields

CodePudding user response：

Ok so I got a working line of code for Contact Form 7 to jump to the next field when the max length of the input is reached. I added ID's to the 3 fields and then created a function that worked. Here is the final code that works:

jQuery('#inputs1').keyup(function () {
    if(this.value.length >= this.maxLength){
        jQuery('#inputs2').focus();
    } });
jQuery('#inputs2').keyup(function () {
    if(this.value.length >= this.maxLength){
        jQuery('#inputs3').focus();
    } });

CodePudding user response：

First, in your functions.php of your theme or child theme, you have to enqueue jQuery UI.

If you wanted to, you could even limit it to the page that your form is on.

If you really want to get fancy, you can set the text field to be readonly which forces people to use the datepicker-ui. However, that requires additional coding.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    // Check if is page where contact form is, or leave out to enqueue everywhere
    //if (is_page(123)) { 
        // Wordpress already has this...
        wp_enqueue_script( 'jquery-ui-datepicker' );
        // Serve locally if you want by downloading.
        wp_enqueue_style( 'ui-datepicker-style', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
        // You can pick whatever theme you want here
        wp_enqueue_style( 'ui-datepicker-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/theme.min.css' );
    //}
}

Then in your contact form do this:

[text* your-field class:use-datepicker]
[submit]
<script>
    jQuery(function($){
        $(".use-datepicker").datepicker({
            dateFormat: "yy-mm-dd"
            // Set Whatever Options you want here 
            // See https://api.jqueryui.com/datepicker/
        }); 
    });
</script>