[Resolved] Hide / Display Submit button after all fields are selected

[Author]

Posts

[bryan]

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

[bryan]

..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] 

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

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?

[bryan]

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

[bryan]

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

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

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.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

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.

[bryan]

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