Field Generates Random ID Each Time; Can’t Add Google Maps API!
-
I am writing to report a problem I am experiencing with the Forminator plugin. Every time I refresh the page, the ID of the address field changes, making it impossible for me to utilize the Google Places API. I have tried to dynamically set the ID of the field using jQuery, but it does not seem to work.
This has been highly problematic because my client has rejected my entire website because it doesn’t have an address auto-complete. Every other form’s documentation suggests simply using the field ID and google places API to add the auto-complete feature. But because of this non-standard behavior of changing the id every time, which I did not foresee, I am forced to switch to using WP-Forms, essentially having to start over with my complex form—not to mention pay for features the formilator already has!
If you know of a solution, please help!
Thanks in advance.
My Allah (S.W.T.) guide you and bestowed upon you His blessings. Ameen.
- This topic was modified 1 year, 6 months ago by nazmuslabs.
-
Hi @nazmuslabs
I hope you’re well today!
Adding integrated support for Google PLaces API for autocompletion is already on our “to do” list so it will be added as new feature in one of future releases (though I don’t have ETA).
As for now, I’m not sure if you are implementing it “from scratch” or using some 3rd-party plugin but according to Google Places API docs, it uses “querySelector” to find fields and “querySelector” accepts any valid CSS selector which means it should also work just fine with classes.
In Forminator you can assign custom class for each field by editing field and seeing your own class name in “Styling” settings of the field.
Depending on how Google Places scripts are implemented on the site, simply using unique class names there may work or, if it doesn’t, pointing to field like this
.myfield input
where .myfield is the custom class that you added and “input” is the field element (because class is added to “wrapper” of the field rather than a field itself).
—-
Another solution is to add custom IDs directly to fields using a bit of additional custom code, like this:
add_filter( 'forminator_field_text_markup', 'forminator_css_id_text_field', 11, 2 ); function forminator_css_id_text_field( $html, $field ) { // define custom CSS IDs for selected text fields $custom_ids = array( 'text-1' => 'my_street', 'text-2' => 'my_city', ); foreach ( $custom_ids as $field_id => $css_id ) { if ( $field['element_id'] == $field_id ) { $html = str_replace( 'id="', 'id="'.$css_id.' ', $html ); } } return $html; }
This would work for “text” type form fields (it may be more “tricky” for other types of fields but still should be doable with similar filters) and you can define what IDs should be added to which of the form fields. I think the example is pretty self-explanatory but if you have additional questions, please ask.
Best regards
AdamThank you for your reply. So I have done what you suggested, and pasted the code. Then after refreshing the page (after clearing all caches), I inspected the field, and the element is displayed as follows:
<input type="text" name="address-1-street_address" placeholder="E.g. 42 Wallaby Way" id="forminator-field-street_address-address-1_6451460daab35" class="forminator-input" data-required="1" aria-required="true" value="">
As you can see, the id is still “forminator-field-street_address-address-1_<random number>.
In order to verify that my site is reading the code correctly, I added this debug statement to the code.// debug statement error_log( 'forminator_css_id_text_field called with field ID: ' . $field['element_id'] );
In my error log file, it says this:
[02-May-2023 17:12:39 UTC] forminator_css_id_text_field called with field ID: text-3
One more thing:
I had replaced the// define custom CSS IDs for selected text fields $custom_ids = array( 'text-1' => 'my_street', 'text-2' => 'my_city', );
with
// define custom CSS IDs for selected text fields $custom_ids = array( 'address-1-street_address' => 'buki' );
because my field name is “address-1-street_address”. Perhaps I made a mistake here?
Thanks for your help.
Edit to answer your question, I am using a plugin to add the google places api. The plugin asks for the api key and field id.
May Allah (S.W.T.) guide and bless you.
- This reply was modified 1 year, 6 months ago by nazmuslabs.
- This reply was modified 1 year, 6 months ago by nazmuslabs.
- This reply was modified 1 year, 6 months ago by nazmuslabs.
HI @nazmuslabs
As I mentioned previously, the shared code works with “text” type fields only. It may possibly be made to work with other codes with some modifications but simply changing field names in the code will not do this.
The ID is also added not to the input field itself but to its “wrapper” block. So for examlpe if a structure is like
<div class="field_wrapper"> <input class="something"> </div>
it would become
<div id="custom-id" class="field_wrapper"> <input class="something"> <d/iv>
With that said, please:
1. list exactly all the fields you need to add custom IDs to them and we’ll look into it again to see if/how this could be customized (based on the code I shared or similar)
2. let me know which plugin exactly (preferably a link to its description page) are you using.
Best regards,
AdamThanks for the reply! I assumed the address field type was a text field type, as in the html source, it shows type=text. That is why I left the field as is. But now, I will replace the address field with a plain text field and try the code again and get back to you on what results I get, Insha’Allah (God Willing).
In the meantime, here’s the link to the plugin I am using: Autocomplete Google Address – WordPress plugin | WordPress.org
P.s., I definitely appreciate the time you have taken to answer my question. It gives me further confidence in this plugin, and if there were any form-building plugins we would pay for, it would be this one, as our business grows and we need to scale up to take advantage of the features.
May Allah (S.W.T.) guide and bestow upon you His blessings; Ameen.
- This reply was modified 1 year, 6 months ago by nazmuslabs.
Hi @nazmuslabs
You’re most welcome!
Just to clarify “the fields” a bit more: address fields are indeed text fields but the “trick” is it’s a “composite” field – it’s not a single field but a set of fields. Even if you disable all the sub-fields of address-type field and leave only one of them active, it will still be handled by Forminator in a big different way than regular single text field.
That’s why to use the code that I shared you should replace “address” field with just a standard “text” fields.
If all that is necessary is such CSS ID, it should work just fine then.
Best regards,
AdamAs promised, I have created a generic text field, calling it “Address”. Element inspector showed the field has the name “text-4”. So, after updating the code and running it, here are the results:
<input type="text" name="text-4" value="" placeholder="123 Rue Exemple" id="buki forminator-field-text-4_64590103f042e" class="forminator-input forminator-name--field" data-required="1">
Good news: the code did update the field ID, Alhamdulillah (Praise God)!
Bad news: it seems to have amended the custom ID value rather than replace it. So rather than just saying “buki” it now says “buki forminator-field-text-4_<random number>”.My guess is that Formintor is adding the id value after my code runs, thus amending it after the custom ID. Thoughts?
HI @nazmuslabs
The code that I shared with you is not mean to replace any IDs/classes – it is actually made to add your custom ID as removing and replacing existing one could a) be a bit more complex due to need of use of regular expressions and b) it can possibly affect other functions of the plugin.
However, it should not matter for the other code for as long as this ID is there.
I’m not really familiar with the plugin that you are using and it doesn’t seem to have any good docs but if correct ID is there (and is configured in the plugin) and it still doesn’t work – it’s quite likely that there is an incompatibility between these two plugins.
One additional thing that I noticed (by looking into code of that auto-complete plugin) is that it seems to be using very simple JS to fill-in the fields so it may be affected by form loading method.
Please try switching your Forminator form to NOT be loaded using AJAX. This can be done by disabling the “Load form using AJAX” option under “Rendering” label in form’s “Behavior” settings.
If this still doesn’t work, you may need to ask that auto-complete plugin developer for help (or if they could provide integration – if they have any questions, they can contact us and we’ll be happy to help); especially that I also noticed an error related to Maps API when using this plugin:
Google Maps JavaScript API has been loaded directly without a callback. This is not supported and can lead to race conditions and suboptimal performance. For supported loading patterns please see https://goo.gle/js-api-loading
which suggests there may be some issue with the plugin itself.
Kind regards,
AdamHello @nazmuslabs ,
We haven’t heard from you for 4 days now, so it looks like there are no more questions for us.
Feel free to re-open this ticket if needed.Kind regards
KasiaApologies for the late response! I have an update. Alhamdulillah I solved the issue through a workaround. Just an hour earlier, the original plugin developer also got back to me on modifying the plugin code to make it work. He notes he plans to eventually update his plugin with this modification, Insha’Allah (God Willing).
My workaround:
So, there is an ancient plug-in (which actually got delisted from the WP repository at the end of last year, for some guideline violation). I found this plugin from an old WPForms support video on YouTube. This plugin is similar to the one I was using, but it also gives you the option to use the “name”, or “class” of the field instead of the “ID”, if you so choose. This is useful because the “name” and “class” of the areas do not change.
Because the plugin was delisted, I manually went to the repo. I transferred all individual php and js files via FTP to manually install the plugin on my site, and it works, Alhamdulillah!
Now, obviously, it is not ideal that I am using a delisted plugin. So I will, Insha’Allah, go through the notes the developer just posted on modifying the JS file and see if I can use it.
Here are the relevant links:
The Delisted Plugin: Address Autocomplete Using Google Place Api – WordPress plugin | WordPress.org
Forum response thread from the address autocomplete plugin developer: Not Working for Formilator | WordPress.org
- This reply was modified 1 year, 5 months ago by nazmuslabs.
- The topic ‘Field Generates Random ID Each Time; Can’t Add Google Maps API!’ is closed to new replies.