Focus on the next form element with datepicker

Question

I have some form elements (4) and when I fill or select current element it must focus next element but I'm using some jquery plugin jquery pikaday and jquery flexdatalist my first input has datalist, second and third element has datepicker and fourth element has select list and my question how can I auto focus next element them when they fill or selected ?

$(document).ready(function() {
  
  $('.flexdatalist').flexdatalist({
       minLength: 0,
       searchContain:true,
  });

  $(document).on('focus', '.checkin, .checkout', function() {
    return new Pikaday({
      numberOfMonths: 2,
      field: this,
      format: "DD.MM.YYYY",
      minDate: new Date(),
      firstDay: 1,
      maxDate: new Date(2020, 12, 31),
      onSelect: function() {
        e = this.getDate();
      }
    });
  });
});

body {
  padding: 30px;
}
input,
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

like trivago

Lesotto · Accepted Answer

I reformatted your code a bit, since crucial JS the scripts were at the bottom. This is only for pikadate boxes on focus, I didn't go into detail for flexdatalist. Anyway, the problem you were having is that on each focus of datepickers you were assigning new ones, and thus you would get a Maximum call stack size exceeded. ('StackOverflow' :) isn't it ironic). So in this example on document ready, each plugin is assigned to the proper box separately. Additionally, for the main problem, while assigning a plugin, an additional function is passed as a function which will say how to select the next box after this one is closed. This is achieved by using onClose property while assigning the plugin. Also if you don't pass a parameter here, it will not create a problem since it is handled.

You can now use the similar method for flexdatalist, just gotta find the proper attribute within the plugin documentation (like onClose is used on pikadate).

Edit: Here's a little update for the flexdatalist box. They have some events in the official documentation, but not sure that any of them will fit the situation.

For example, you may use change:flexdatalist like so:

$('.flexdatalist').flexdatalist({
    minLength: 0,
    searchContain:true,
}).on('change:flexdatalist', function() {
    $('#checkin').focus();
});

But the issue here, as with any other event that may suit you, is that the propagation of closing of the plugin is done only after these events. And then you would get a chained closing command on all plugins as they close one after another in a series of events. Which is what happens here, and what also happens on pikadate plugin if you try to put a focus functionality in onSelect handler. To solve this problem, I would rather recommend using another plugin which has a on-close handler which propagates only after the plugin has finished everything (at least like pikadate has). The other option would be to extend the plugin which can be a bit more work.

Focus on the next form element with datepicker

Answers (1)

Related Questions