Home › Toolset Professional Support › [Resolved] Hide / Display Submit button after all fields are selected
Problem:
Hide / Display Submit button after all filter fields are selected
Solution:
You need to add custom jQyery code to your view's filter section JS box.
You can find the proposed solution, in this case, with the following reply:
=> https://toolset.com/forums/topic/hide-display-submit-button-after-all-fields-are-selected/#post-1211891
Relevant Documentation:
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
- | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | 10:00 – 13:00 | - |
- | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Kolkata (GMT+05:30)
Tagged: Views, Views plugin
This topic contains 7 replies, has 2 voices.
Last updated by bryan 5 years, 9 months ago.
Assisted by: Minesh.
Tell us what you are trying to do?
Display Submit button ONLY after all fields have been selected.
this is working well where thee is a single relation ship field (thanks to help from toolset support Minesh) for a relationship for using this field in the views JS editor
$('select[name="wpv-relationship-filter"]').val()
I am trying to achieve the same thing for a datepicker using this filter
[wpv-control-postmeta field="wpcf-date-available" url_param="tbk_date"]
I tried using a selector as below but I was unable to narrow it down to the specific selector for toolsets date picker implementation for a field...something like..
$('select[name="wpcf-date-available"]').datepicker() ????
Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/
Is there a similar example that we can see?
hidden link
this function is working well
jQuery(document).ready(function($){ $('input[name="wpv_filter_submit"]').hide(); }); jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) { if($('select[name="wpv-relationship-filter"]').val() == 0){ $('input[name="wpv_filter_submit"]').hide(); }else{ $('input[name="wpv_filter_submit"]').show(); } });
What is the link to your site?
this is just a test site which simplifies the question
hidden link
and on
hidden link
I would like to be able to hide the submit button until both country and date have bene chosen
thanks in advance
..perhaps I am going about this all wrong.
The date is a field I will never store in a custom field but merely pass on as a query parameter to the next view. (it is used by a 3rd party plugin I am using which listens for ?tbk_date= which accepts almost any specific date formats but is only look for a date and not a unix timestamp)
I need to use a view (rather than a gravity form for example) as I need to select two things one of which is a types relationship.. the datepicker is merely getting the date to pass to the next page (which has the same filter and query loop)
[wpv-filter-start hide="false"] [wpv-filter-controls] [wpv-control-post-relationship ancestors="country@country-tour-guide.parent" url_param="wpv-relationship-filter"] <div class="form-group"> <label>[wpml-string context="wpv-views"]Countries[/wpml-string]</label> [wpv-control-post-ancestor type="select" ancestor_type="country@country-tour-guide.parent"] </div> [/wpv-control-post-relationship] <div class="form-group"> <label>[wpml-string context="wpv-views"]date available[/wpml-string]</label> [wpv-control-postmeta field="wpcf-date-available" url_param="tbk_date"] </div> [wpv-filter-submit output="bootstrap"][/wpv-filter-controls] [wpv-filter-end]
Hello. Thank you for contacting the Toolset support.
Well - can you tell me exactly what you want to do and share few screenshots that will help me to understand what you are looking for.
As I understand - do you mean that you want to set the date field as per the selected date from the previous filter?
Hi Minesh
quite simple conceptually - but I have tried many ways to achieve it probably needlessly complicating it.
I simply want to select and date and country on one page and display the results on the next - while hiding the submit button on the first page until both a country and date are selected
key info is that the country list is a TYPES CPT and the DATE is just a desired search parameter which I pass on to the booking plugin by query parameter.
I made a short screencast
hidden link
...just showing what works with only (country) to select and what almost works with both country and date to select.
I have two problems here.
1. This Ticket -- I can hide the submit button (thanks to your earlier help) until a country is selected, but cannot figure out how to hide it pending both country and date selection (or even just the date)
2. The date(as a unix timestamp) gets passed ok with a query parameter but I need YMD format
I am not asking for help with number 2 in this ticket but I mention it as the solution to number 1 might affect it.
btw I am using two views one for search form and the other for results.... so I can pass a query parameter from one to the other.
hidden link
I can give any sort of access to the site if that is easier.
the (simplified sample ) views output from
[wpv-post-title]<br> [types field="main-photo"][/types]<br> [tb-calendar coworker='[wpv-post-author format="meta" meta="ID"]' ]<br> <hr>
the tb-calendar is as you would guess showing the calendar and it needs a query parameter to chose a day rather than displaying the whole month so ultimately I want to pass the selected date on as something like:
?wpv-relationship-filter=822&tbk_date=20190404
rather than
?wpv-relationship-filter=822&tbk_date=1554336000&tbk_date-format=Y-m-d&wpv_filter_submit=Submit
If you cannot view the screencast I will make some screenshots or if its easier I can provide access to the site - which is a simplified test of my final.
thanks again
I made a mock up using gravity forms of what I want to do:
I am trying to only use toolset on this site with no gravity forms, and as I want to use a toolset relationship field for countries views would be a better choice if I can get it to work.
thanks
Ok - can you please share access details so it will be easy for me to fix the submit button issue.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).
I have set the next reply to private which means only you and I have access to it.
Can you please check now:
=> hidden link
I've added following code to your view's JS box:
jQuery("input[name='tbk_date']").on('change keyup paste', function () { var value = jQuery('input[name="tbk_date"]').val(); console.log(value); if(value == '' || $('select[name="wpv-relationship-filter"]').val() == 0){ $('input[name="wpv_filter_submit"]').hide(); }else{ $('input[name="wpv_filter_submit"]').show(); } }); jQuery("select[name='wpv-relationship-filter']").on('change', function () { if($('select[name="wpv-relationship-filter"]').val() == 0 || jQuery('input[name="tbk_date"]').val()==''){ $('input[name="wpv_filter_submit"]').hide(); }else{ $('input[name="wpv_filter_submit"]').show(); } }); jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) { /** * data.view_unique_id (string) The View unique ID hash * data.view_changed_form (object) The jQuery object for the View form after being updated * data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode * data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode */ //console.log($('select[name="wpv-relationship-filter"]').val()); if($('select[name="wpv-relationship-filter"]').val() == 0 || jQuery('input[name="tbk_date"]').val()==''){ $('input[name="wpv_filter_submit"]').hide(); }else{ $('input[name="wpv_filter_submit"]').show(); } });
The submit button will not be displayed until you select both filter entries.
Minesh
that's great - thank you I spent ages looking for the correct datepicker selector and it turns out just to be the input url_parm. .. I think I was lead astray by other forums entries.
this is very helpful because on the live site we will have hundreds or locations and thousands of guides - so this will significantly help performance
well done
and thank you once again