Issue with Date Field and Select Field
-
Hi,
I have an issue with the Date Field where the calendar is not showing and the Select field where the field is duplicating.
It works fine on the normal page as you can see on the page I have provided but it has issues when displayed in a pop-up created through Elementor. You can click on Add new Button to open the pop up on the same page
The page I need help with: [log in to see the link]
-
I hope you’re fine today!
I tried to check it but I can’t see any “Add new” button on the page you shared. The only popup I can see there is under the “Book your free trial” button but that one opens some Elementor form – so that’s a different form.
Did you change it or the “add new” is on some other page – if yes, where can we see that?
Please advise!
Kind regards,
AdamHi,
Sorry, the button had a display condition and hence was not displaying for the non-logged-in users. You should be able to see it now.
I hope you’re well today!
It seems we are dealing with two issues here:
1. It’s the very same form both on page and in the popup and that result in DOM issue “Found 2 elements with non-unique ID” – which in this case affects JS that is responsible for showing/hiding the calendar.
It would be recommended to use either different forms – one on the page and different one in the popup or to use form in one of those locations only (either on page or in popup).
2. Then once that’s solved and you still have form in the popup, you may need to add this CSS to the site (e.g. via theme’s Custom CSS option or similar but not via form’s custom css!):
#ui-datepicker-div {z-index:999999!important;}
Kind regards,
AdamHi,
I had added both the forms just to show that it works when it is displayed normally on the page, but not in popups.
I have removed the form now and it is only available in the pop up. But still has the same issues. Also, i added the recommended CSS but it still did not work.
Hi Team,
Any update on this? Were you able to replicate the issue?
Hi @maheshpunhani,
Please do note that we reply to tickets based on queue order and hence the delay.
Unfortunately, the CSS won’t work when I check your website as the HTML for the date picker isn’t loading properly when checked.
I checked whether I could replicate the issue in my test site with the popup and with the Date Picker field but it works fine out of the box.
I’m afraid , the issue noticed is more related to a conflict. Possible to check whether it makes any difference if you temporarily disable the LiteSpeed plugin?
The plugin seems to be minifying the files, so would like to check whether the issue noticed at the moment isn’t due to that.
If the issue is still the same even after disabling the above plugin, then could you please set up a staging site and check how it behaves with only Forminator and Elementor Popup enabled?
The above step will help in ruling out where exactly is the issue. Please do share the staging sites URL if the issue is still present even with all the plugins disabled as mentioned.
Please do let us know how that goes.
Best Regards,
Nithin
Hi,
thanks for the update. Unfortunately, nothing that you have mentioned worked for me. I have created the stage site as well, disabled all plugins but it did not work
Test Page – IB Scholarz Academy
But i noticed one thing, it works fine in the window where i am logged in as the admin. But if i am not logged in or logged in with users that are not admin, we get the error
Hi @maheshpunhani,
Could you please confirm if you have cleared all the cache once every other plugin was deactivated?
Can you please share an export of the form using Google Drive or DropBox so that we can check things further? I hope the following guide comes in handy: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export
We look forward to hearing back from you.
Kind Regards,
Nebu JohnHi,
I did clear the cache after moving everything to staging.
Here is the export of the form as well. Form
Thanks for sharing the form and additional info about “admin” vs “non-admin” view, it was very helpful.
I’ve tested it with Elementor popup on my end and there are two ways to solve that:
1. apparently you are using shortcode in order to add form to your popup; in this case you must make sure that form has “Load form using AJAX” option enabled in form’s “Behavior” settings; with this option enabled the issue is happening exactly as on your site – I can fully replicate this.
It’s a compatibility issue but not really a bug – it’s related to how form’s and popup’s scripts are loaded.
2. or you can remove form shortcode from popup and instead use Forminator’s form widget there. I’d still recommend keeping “Load form using AJAX” option enabled but it seems to be working anyway – even without it.
Best regards,
AdamPerfect. Thank you so much for your patience and help. I just selected the “Load form using AJAX” option and everything is working fine.
Thank you so much
The topic ‘Issue with Date Field and Select Field’ is closed to new replies.