[Resolved] Disable SUBMIT button until pulldown is selected

[Author]

Posts

[bryan]

Tell us what you are trying to do?
Reduce query overhead from ill defined searches

Is there any documentation that you are following?
https://toolset.com/documentation/user-guides/front-page-filters/
and discover-wp.com

What is the link to your site?
hidden link
hidden link

I am making a rather large site with lot of data which is well categorized. As the real site is complicated and under development I have made a test site based on discover-wp.com tours.

The idea is to select a country which then takes the customer to a new page where they can further filter the search.

This is working well using views except that if the customer fails to make an initial selection we search on ALL countries, which is too broad and on this test site for example a timeout sometimes occurs.

In order to prevent results displaying on the initial page I am calling the view from a sidebar widget.  This works well excepting that I do not seem to be able to prevent submit being pressed when no selection has been made.

The best idea I have is to Hide(or disable) the submit button until something is chosen - but I am not sure how to go about this and if there is not a better way to achieve the same thing.

In my example countries are a custom post type and not a taxonomy (as we want to add other fields and use countries serviced for other things) and I have set up a 1 to many relationship between Countries and Tours

thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - you can use the custom javascript/jQuery and you should add it to your view's search and pagination section's JS box.

The following link may help you:
=> hidden link
=> https://stackoverflow.com/questions/16571412/javascript-disable-button-until-value-is-selected

If you still not figure out how to do it, please get in touch with me with access details.

[bryan]

Minesh kindly resolved by adding to the Search and Pagination JS Editor:

 jQuery(document).ready(function($){
  
  $('input[name="wpv_filter_submit"]').hide();      
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  
  $('select[name="wpv-relationship-filter"]').on('change',function() {
    
    console.log(this.value);
    if($(this).val() == 0){
      $('input[name="wpv_filter_submit"]').hide();
    }else{
      $('input[name="wpv_filter_submit"]').show();
    }
  
});

	
});
 

[Minesh]

Ok - I've added following code to your [wpv-view name="country-filter"] view's search and pagination section's JS box:

jQuery(document).ready(function($){
    $('input[name="wpv_filter_submit"]').hide();      
});

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
	*/
    if($('select[name="wpv-relationship-filter"]').val() == 0){
      $('input[name="wpv_filter_submit"]').hide();
    }else{
      $('input[name="wpv_filter_submit"]').show();
    }
	
});

Could you please check now:
=> hidden link

[Minesh]

Could you please mark it resolved - I think we cross-posted the replies 🙂

[bryan]

Final update noted - I see the later JS also toggles the button on and off should the user deselect

great job thanks Minesh