I've got a post form with some cred_generic_fields that I'm populating based on input and select values from users on other cred_generic_fields. See below for exampel cred_generic_field
<div class="form-group">
<span class="tooltip"><label>Course State</label><span class="tooltiptext">Pre-populated based on your nomination.</span></span>
[cred_generic_field type='select' field='course-state' class='form-control' output='bootstrap']
{
"default":"27",
"generic_type":"user_id",
"required" : 1
}
[/cred_generic_field]
</div>
The cred generic fields are set based on a customer javascript file that I've created in my theme. See example of what is done when the course-state is selected.
// custom JS to fetch the course after course state is selected.
jQuery("select[name=course-state]").on("change", function ($) {
// on change of state field, call custom get_courses function passing state field.
var state = jQuery(this).val();
var data = {
action: "get_courses_by_ajax",
state: state
};
let dropdown = jQuery("select[name=course-name]");
dropdown.empty();
// target the correct select field and then pass in the values from the associated get_courses_by_ajax_callback function
jQuery.post(ajaxurl, data, function (response) {
......
On this post form, I've got some validate run using cred_form_validate hook from toolset which works great.
The issue though is that once the error messages are fired to the front-end, the cred_generic_fields that I've populated via my JS file don't seem to fire. Essentially what happens is that the errors firing over-write all the selected values by a user.
See attached example where I've selected a value from "course_state" and no events can be seen.
I know this a big of a vague question but has this been seen before where the cred_form_validate does this? and/or any other examples where the cred_form_validate may not do this if the javascript was written a different way?
The selected value not retained is more of a JS issue as you are populating the field using Ajax and unless the page is refreshed this should stay the same.
You have mentioned you are using cred_form_validate hook however i am not clear whether the form is submitted over ajax ? Also check the browser console for any JS errors.
Also cred_form_validate will only return the errors there are no JS script involved. It would be better if you can share more screenshot or record your steps using loom.com so that it is easy to understand what is going on.
As you can see, the user first selects a value from the "your unsubmitted nominated social rounds" field. Then based on this value, the following fields are dynamically displayed.
When the errors display, you can see that the "your unsubmitted nominated social rounds" stays and so does the "state" field but all other fields reset.
As per the code above which I detect change based on course-state, the relevant JS for this exists.
Happy to share a copy of the custom JS file if you wish. Please make this session private and I'd be happy to.
I have gone through the video a couple of times, i see the Course fields appear after some time after the error message is displayed , Also i see the JavaScript for the on change event is not triggered can you please check for any JS errors in the console ?
I am enabling the private fields you can share me access to the site so that i can take close also share the custom js file .
Also i would suggest changing the on change script to
jQuery(document).on('change', 'select[name=course-state]', function() {
// Does some stuff and logs the event to the console
});
For some reason the site is not accessible from my end it keeps loading for ever. Can you please fix that in case if there any IP or country restriction let me know i will try using VPN.
That's now been updated.
Please select the following values
"your unsubmitted nominated..." = Apollo Bay Golf Club
"How many holes.." = 18 holes
"course tees" = GA, Blue, Men
"Stableford score" = 110
Please also upload any image and then press submit. You will see the issue then.
I have checked this in details and am able to reproduce the issue in the test site
The Forms is unaware of the Select options generated through JS and it is unable to match the validation results with the select option and returns an unset value. this is a limitation. I am checking with the developers for a possible workaround or a hooks where you can add the options from JS when the form validation is returned.
The basic issue here is that Toolset Forms is not aware of the options rendered through JS, During the validation process the form loops through the fields since the options are generated on the fly these are not available when the toolset form generate the processed forms.
Our developers responded with a JS event hook which fires after the validation is complete, However that would not help much as the form fields are already processed and returned before the event action takes place.
I am mentioning the JS event name here so that you can try it yourself. I am not a JS expert however you can give that a try, The action will have access to the formid.
Instead of generating the options using JS, You can also use custom Shortcode with form conditionals and do all the processing in the short code function that would returns the form fields.
