[Resolved] Further adjustments to a filter needed

[Author]

Posts

[Simon Logan]

Following up on my previous support request (https://toolset.com/forums/topic/filtering-by-a-number-entered-by-the-user-between-two-stored-field-values) which Christian helped with, I only noticed later that there were still a couple of issues needed finessed/resolved in order to finalise what I was hoping to achieve.

The main one is that I've noticed that, with my filter in place in the functions.php file, it now properly filters the products based on the range number being supplied falling between the min and max amount fields, however it ignores any other searches - so I have other fields in my search form alongside the range number one but if I leave the range number blank and search simply on one of these instead (ie "location") then no results are returned?

The other small thing is that with the input field I've manually entered (the range number one) when the form is submitted the URL param gets added in, as I'd expect, however if I then submit the form again (having adjusted my search params or not) then that range number URL param gets appended again so appears twice. That is to say, I go to hidden link then search on a loan amount of 25000, then page refreshes and the URL is appended (alongside the other params) with &loanamount=25000, however if I think adjust the loan amount to 35000 and search again the URL will be products&loanamount=25000&loanamount=35000. Is there a way to get this manual field updating in the URL params just as the other filters do?

[Waqar]

Hi Simon,

Thank you for waiting, while I performed some tests on my own website.

Simpler approach to what you're trying to achieve is to replace the manually entered "Loan Amount" field with two actual/built-in fields/filters for the "Minimum Loan" & "Maximum Loan" fields.

The two newly entered fields and their filters will work the same way as the other fields ( e.g. "Loan Type", "Location" etc ) and you'll no longer need the custom PHP code snippet for the "wpv_filter_query" filter.

Since you only want one input from the visitors for "Loan Amount" (instead of two separate fields), you can change the label for one of those fields to the "Loan Amount" and hide the other field's div with "form-group" class using custom CSS code.

Next, you can include some custom script that can make sure that when the value is entered in the visible field, it is automatically filled in the other hidden field as well.

Example:

jQuery("input#id-visible-field").change(function() {
  var newVal = jQuery("input#id-visible-field").val();
  jQuery("input#id-hidden-field").val(newVal);
});

Note: you'll replace "id-visible-field" & "id-hidden-field" with the actual field IDs used in your search form.

As a result, both filtering fields will be submitted with the search form, when the user has entered the value in only one of them. This will also fix both the issues that you originally reported because the search form will no longer have a custom input field.

I hope this helps and please let me know if any step is not clear.

regards,
Waqar

[Simon Logan]

Hi Waqar

Thanks so much for this, trying it now but the JQuery code doesn't look like it's running as when I enter a value into the visible field (min loan) and use Inspector to watch the hidden one (max loan) the value of the latter doesn't change. I've adjusted the code you supplied with the relevant ids as follows and added it into the JS EDITOR box beneath the SEARCH AND PAGINATION box:

jQuery("input#wpv_control_textfield_wpv-wpcf-finance-min-loan").change(function() {
  var newVal = jQuery("input#wpv_control_textfield_wpv-wpcf-finance-min-loan").val();
  jQuery("input#wpv_control_select_wpcf-finance-max-loan").val(newVal);
});

Any ideas what I'm missing?

[Simon Logan]

Ah, I caught what it was - originally I'd added both new fields to the form with their default of being a select list however I needed to change them to a text field instead and I'd forgotten to update the id to reflect this. Updated to :

jQuery("input#wpv_control_textfield_wpv-wpcf-finance-min-loan").change(function() {
  var newVal = jQuery("input#wpv_control_textfield_wpv-wpcf-finance-min-loan").val();
  jQuery("input#wpv_control_textfield_wpv-wpcf-finance-max-loan").val(newVal);
});

And works now (note: wpv_control_select_wpv-wpcf-finance-max-loan is now wpv_control_textfield_wpv-wpcf-finance-max-loan)

[Simon Logan]

Thanks for such great assistance, you not only solved my problem but also helped my streamline the whole search process.