[Closed] After user chooses date on datepicker focus 'jumps' to first field

[Author]

Posts

[christopheD-3]

Tell us what you are trying to do?
Creating a form where users have to select a date.
After a user has chosen a date, the focus 'jumps' to the first field.
Instead of to the next field, or maybe even the own field.

I've tried several solutions, but those are not working.
Came up with this script, added to the JS part of the form creator.
Where the first input is the first datepicker you see in the form. Asking it to, onClose, focus on the second one.

$(document).ready(function() {
$('input[id=cred_form_44126_1_1_stagebank-begindatumdisplay-only-55-69]').datepicker({
onClose: function(dateText, inst) {
$('input[id=cred_form_44126_1_1_stagebank-einddatumdisplay-only-69-85]').focus();
}
});
});

Is there a similar example that we can see?
Go to the link and please click the button '+ Voeg je stageplaats toe'
Try to choose a date and see the behaviour of the focus.
Certainly when you're scrolled down and this out of the viewport.

What is the link to your site?
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand - you want to move focus to another field as soon as you select the date from date picker field - correct?

It seems I will require admin access details to see the form you are talking about. Can you please send me valid admin access details and I'm happy to review it.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thank you for sharing admin access details but can you first please confirm following is true or not:
=> As I understand - you want to move focus to another field as soon as you select the date from date picker field - correct?

Please clarify if you have different requirement.

[christopheD-3]

Apologies Minesh, I've missed that part 🙂

Yes we have two datepickers there.
For the first one (left side) after focus should be to the second date picker (right side).
For the second one, after focus should be to the next field.

Right now it is always to the first field of the form. Did you see that?
Please check image for more clarification

[Minesh]

I see there are few JS error when I select the field. Out of those I fixed the one by changing the code added to JS box as given under:

jQuery(document).ready(function($) {
        $('input[id=cred_form_44126_1_1_stagebank-begindatumdisplay-only-55-69]').datepicker({
            onClose: function(dateText, inst) {
                $('input[id=cred_form_44126_1_1_stagebank-einddatumdisplay-only-69-85]').focus();
            }
        });
    });

- Where I changed line from:

 $(document).ready(function() { 

To

 jQuery(document).ready(function($) { 

I still see the following JS error on browser's console and the code responsible for that is:

Uncaught TypeError: Cannot set properties of null (setting 'onclick')
at mijnnederlands.taalunie.org/:719:18
[/php]

<!-- start Simple Custom CSS and JS -->
<script>
 var checkbox = document.getElementById('chkbx1');
var delivery_div = document.getElementById('soort_download_les1');
checkbox.onclick = function() {
    console.log(this);
   if(this.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   }
};</script>
<!-- end Simple Custom CSS and JS -->

Can you please check where the above code is added and it should not be added to this page.

[christopheD-3]

Thank you for helping out.
We've successfully removed the code from that page.
Unfortunately, the issue remains.
I've checked the console and don't see that issue anymore.

Do you have any other ideas?

[Minesh]

I checked and there must be conflict with theme or third-party plugin or other JS.

- What if you try to create a test page and add the same form to that test page (without adding it to popup box) and see if that works?

In addition to that if above step does not work:
*** Please make a FULL BACKUP of your database and website.***
Could you please try to resolve your issue by deactivating all third-party plugins as well as with the default theme to check for any possible conflicts with any of the plugins or themes?
- Do you see any difference?