La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
Contributeur de premier rang | Partenaire solutions Diamond
Embedded Form: Populating form fields
Résolue
@Kevin-C is correct - your issue is that WordPress loads jQuery in safe-mode which keeps other libraries from using the $ shorthand from colliding the the global namespace.
But - you shouldn't actually need to make a new collection.
The $form argument of the callback is actually a jQuery collection of the entire <form> element.
That should also be a bit more stable - because there could be a scenario where there are mulitple inputs with the same name on the page - and if that were to happen - $('input[name="firstname"]') would return a collection of more than 1 element which would be problematic.
Hello @dranreb , I think issue is not in code as there is no error but as i can see you have changed value on submit event it should be as soon as form renders. can you please check it after adding below code..
Unless your implementation of Kentico is using some sort of front-end like React or Vue - I don't see why this wouldn't work. A couple things to check:
1. Make sure you have the jQuery library included on your page.
2. Check the JS console for errors - send a screenshot through with anything that may appear there.
Also if you have links to the page - share it and I can look into why it may not be working.
Could you provide a live test site for us to look at?
At a glance though there might be a few things you can check:
Is the value of the target input name attribute actually "firstname"? If not the script will not be targeting the correct input, and might not send an error.
Does the site you're embedding the form into have jQuery loaded? Without jQuery your $('input… will not function. You could try plain ol' javascript.
Your script might be attempting to run before jQuery is ready or the form is even loaded. Try wrapping the function to update the value in a documnet ready function.
Contributeur de premier rang | Partenaire solutions Diamond
Embedded Form: Populating form fields
Résolue
@Kevin-C is correct - your issue is that WordPress loads jQuery in safe-mode which keeps other libraries from using the $ shorthand from colliding the the global namespace.
But - you shouldn't actually need to make a new collection.
The $form argument of the callback is actually a jQuery collection of the entire <form> element.
That should also be a bit more stable - because there could be a scenario where there are mulitple inputs with the same name on the page - and if that were to happen - $('input[name="firstname"]') would return a collection of more than 1 element which would be problematic.
My issue was that I was imputting a script into wordpress where I would grab the utm params from the url and then input them into the hidden fields in the form they would eventually nav to.
My error at first was that, inside my onFormReady($form) function, I could not use $('input[name="firstname"]').val('Sue').change() because apparently Wordpress does something weird with jQuery where I couldn't use the $ because it would throw an error that t doesn't recognize the $.
So then I used jQuery ('input[name="firstname"]').val('Sue').change(), which ran without an error, but did not actually change the value of the input.
I then tried document.querySelector('input[name="firstname"]').setAttribute('value', 'Sue'), to manually change it, which worked SOMETIMES when testing in the console, but not in the code. It would return null as if the element did not exist, which I could see in the HTML, it definitely did exist.
Then I used the code you suggested and it worked. Thank you so much!
How did you come up with this solution? How did you know to use the find method on $form? Did you manually sift through the $form available methods? I tried for a little bit but it was so cluttered w data I didn't know how to zero in on the methods and test each one.
The .find() method is part of the overall jQuery library - it acts as a "sub-query" on an existing jQuery collection. Since the $form object returns a collection of the <form> element you can search through it using .find().
The reason your other approaches were not working probably had to do with not using the callbacks - since the form is added to the page using JavaScript - you need to make sure you prefill the fields only AFTER the form has been added into the DOM (onFormReady() is perfect for that scenario).
Both the onFormReady() and onFormSubmit() callbacks require jQuery to function (which makes sense since the $form argument is a jQuery collection).
I attempted all those approaches within the onFormReady($form) function but no dice.
According to some other forums I read, it is a thing with Wordpress that it does not allow the use of $ to avoid messing with their global variables. I am not really sure why jQuery() did not work in it's place. I was likely not using it correctly. Thanks again.
Just got back to this. After checking the console I'm seeing a few errors happening.
Most notably the "ReferenceError: $ is not defined". From some research I found that WP uses a function to prevent naming conficts, meaning that to use jQuery you mush refer to it as "jQuery…" rather than the "$…" in your functions. See this article.
Another quick way to check if this is required is by using the dev tools console and tyoing "$().jquery" if this doesn't work it means that you must use the other method to write jQuery. Try using "jQuery().jquery". See this video.
See image below:
You can see that I first attempted to run exactly your code, and got the same error that happened on load.
Then you can see that I changed the "$" to "jQuery" and ran it again, and boom it seemed to work.
TL;DR
Wordpress prevents jQuery naming conflicts by requiring you use a "jQuery" in place of the usual "$". To use jQuery you must follow this convention.
Hope this gets you going in the right direction. For what ever reason if you need to update the values outside of the embbed snippet please reach out!