Tell us what you are trying to do?
I have a Toolset CRED Form and a View with three "Ajax" filters (Setting: "AJAX results update when visitors change any filter values") on the same page. With the CRED Form the user can make new entries, while the AJAX view should check, whether there are already similar entries in the database.
If I change the value of a select field in the CRED Form, the value in the Ajax filter should update accordingly..
CRED Form:
[credform]
[cred_generic_field field='trainingsort' type='select' urlparam='']
{
"required":1,
"validate_format":0,
"default":[],
"persist":1,
"options":[ [wpv-view name="trainingsanlagen-ort-auswaehlen-2-0" ids='[wpv-attribute name="reitanlage"]'] ]
}
[/cred_generic_field]
[cred_generic_field field='von-uhrzeit' type='select' urlparam='']
{
"required":1,
"validate_format":0,
"default":[],
"persist":1,
"options":[ [types field='select__von-uhrzeit__montag'][/types] ]
}
[/cred_generic_field]
[cred_generic_field field='bis-uhrzeit' type='select' class='ortsparameter' urlparam='']
{
"required":1,
"validate_format":0,
"default":[],
"persist":1,
"options":[ [types field='select__bis-uhrzeit__montag'][/types] ]
}
[/cred_generic_field]
[cred_field field='form_submit' output='bootstrap' value='Add event']
[/credform]
Ajax Filter
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
[wpv-control-postmeta field="wpcf-rask-ort-des-geschehens" type="select" default_label="Select location" url_param="wpv-wpcf-ort"]
</div>
<div class="form-group">
[wpv-control-postmeta type="select" field="wpcf-rask-von-uhrzeit-15-minuten" default_label="von Uhrzeit" url_param="wpv-wpcf-von"]
</div>
<div class="form-group">
[wpv-control-postmeta type="select" field="wpcf-rask-bis-uhrzeit-15-minuten" default_label="bis Uhrzeit" url_param="wpv-wpcf-bis"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]
JavaScript, that doesn't work properly yet...
jQuery("select[name='trainingsort']").on('change', function () {
$('select[name="wpv-wpcf-ort"]').val("select[name='trainingsort']");
});
Is there any documentation that you are following?
https://toolset.com/forums/topic/hide-display-submit-button-after-all-fields-are-selected/#post-1211891
Is there a similar example that we can see?
no
What is the link to your site?
hidden link
Hello,
There isn't such kind built-in feature, it needs custom JS codes, please provide a test site with the same problem, fill below private message box with login details, also point out the problem page URL and form URL, I need to test and debug it in a live website, thanks
Thanks for the details, I am checking it in your website, will update here if find anything
It is very confused of your website settings:
1) the parent post view:
hidden link
It is querying "Tage" posts
2) and the child post view:
hidden link
It is querying "Events" posts
3) And the post form is for creating "Termine" post:
hidden link
There aren't post type relationship between "Tage" and "Events"
There is only one post type relationship between "Events" and "Termine"
Please elaborate the questions with more details:
How and where do you want to do the AJAX filter, after user change which inputs of search form?
Hello Luo, I am very sorry for the confusion.
Instead of post type relationship between "Tage" and "Events", I use a "date" field. Both post types have a "date" field. The child view querys all "Event" post types, that have the same "date" like the Parent. "Tage" is the German word for "Days". To sum up the Child View Query Filter " RASK | VON-Uhrzeit -- 15 Minuten is a number greater than or equal URL_PARAM(wpv-wpcf-von-uhrzeit)" is the substitute for the missing relationship filter. It is what ties both Views together.
I try to achieve that, if I change a value in the three Toolset CRED Form select fields [(1) WHERE?, (2)from (time), (3)until (time)], the same value appears in the according field (1), (2) or (3) in the Ajax Filter of the following view: hidden link
I have seen, that something like that can be done, but I am not exactly sure, how I should target the Toolset Cred Form Select fields and if they have something like ".on('change')" and how I should target the Ajax Fielter Input Fields (1), (2), (3)
Post Type "Event" and Post Type "Termine" are both events... It's not relevant, that they have a relationship. I just forgot to delete that relationship. It doesn't serve any purpose.
There isn't such kind of built-in feature within Toolset plugins:
You are embedding a search form into another Toolset post form, it won't work simply, form insider form is forbitten by HTML standard:
hidden link
form must not contain other form elements.
so you might consider other workaround, for example:
1) Create a post view:
- Query "Tage" and "Events" posts
- Filter by the custom "date" field
- In Views loop, display a link, and pass URL parameter with the "Tage" and "Events" post IDs to below target page
2) In the target page, you can get the URL parameters by shortcode [wpv-search-term]:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-search-term
and setup the default field value of shortcode [cred_generic_field]:
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_generic_field
Hello Luo,
I am not embedding a search form into another Toolset post form. I am embedding them next to each other. As long as they show up on the same page, it should work.
I like your workaround, however I can't set it up like that, as it is not in alignment with the project documentation.
Basically, I just want to know, if you could give me a hint, if I target some of the Toolset elements (like for example input[name='trainingsort']) in the wrong way?
jQuery( function( $ ) {
$("input[name='trainingsort']").change(update);
function update() {
var location = $("input[name='trainingsort']").val();
$("#wpv_control_textfield_wpv-wpcf-ort").val(location);
}
} );
I will leave it open for now and think about possible solutions after Chrismas : )
Yes, it is possible to use custom JS codes to target form elements by "name" attributes, and within Toolset post forms, you can try the cred_form_ready to trigger your custom JS codes, for example:
jQuery(document).on('cred_form_ready', function() {
jQuery("input[name='wpcf-my-field-slug']").change( // replace wpcf-my-field-slug with your custom field slug
// .... here setup your custom JS codes
);
});
More help:
hidden link
Many thanks Luo, this helped a lot : ) I'm very gratefull.
-------------------------------------------------------------------------------
For all Toolset user, who struggle with am similar problem in the future: That's the current code:
jQuery(document).on('cred_form_ready', function() {
jQuery("select[name='trainingsort']").change( function() {
alert( "Generic select field changed!" );
});
jQuery("input[name='wpcf-name']").change( function() {
alert( "Toolset single line field changed!" );
});
});
It works fine : )
