Skip Navigation

[Resolved] custom filter number input format

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 3 replies, has 2 voices.

Last updated by Beda 4 years, 11 months ago.

Assisted by: Beda.

Author
Posts
#1233078

Tell us what you are trying to do?
I am currently filtering real estate listing by price range:
hidden link
It works great when someone enters "plain" numbers like 1000000 but when they enter US formatted number like 1,000,000 or $1,000,000 or even even $1,000,000.00 then it return no results.

What I need to do is format the numbers when they get submitted
I need to remove , and $ and remove . and any number after the .

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

Is there a similar example that we can see?

What is the link to your site?

#1233177

Toolset Views does not validate the inputs when chosen "as defined in Types" or "Text Input".
Adding validation would result in a lot of complicated and never-satisfying custom messages that we either would have to hardcode or provide a mechanism to customize the validation at the user's needs.

So you look after validating and reformat the entered value with custom code, there is no way to do this in Views.
I am going to ask my colleagues what they think whether to suggest this as a Feature Request on https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/ or report it as a usability issue.

For now, you would require custom code doing this validation.
You can, for example, filter the Search input with some Custom JS Code.
For example below code makes it so that you cannot even type in anything in the inputs, unless numbers:

(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));


// Install input filters.
$(".my_class").inputFilter(function(value) {
  return /^-?\d*$/.test(value); });

Change .my_class in the code above to a class added to the single search inputs
Fire the code in the JS editor of Views.
It's custom code, so not entirely supported, but this should get you kickstarted for now.

#1233313

Is there a way for me to format the input on submit?

For example strip any commas and remove the . and everything after.

Not allowing people to enter numbers with commas is not really an option, especially for house pricing in the millions. this becomes un readable.

#1233389

It is subject to custom JS Code, as it's not possible in Toolset's GUI. It has no features inbuilt to do this.

I am also still waiting for the feedback of my colleagues about whether or not this should be submitted by you to https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/ as a Feature Request, or, if we will resolve this in a Usability aspect related task.

The function above actually does listen to a Regex, which you can alter when the function is fired.
This will help:
hidden link

For example, you can also find and replace those values while typing, as here:

var replaceValues = {
    '$' : '',
    ',' : ''
}

$('.inputclass').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');//see above doc for customizations
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('. inputclass').val(newText);
});

It will remove the "," or "$" as soon you type them in the fields

Doing this on submit of the View Search form is possible by listening to the Form's submit moment. I am using the class of the view wpv-filter-form here, and input class as the class of the text input to filter (format). It removes the comma. You can add enhance this of course.

jQuery('.wpv-filter-form').on('submit', function() {
    var input = jQuery('.inputclass');
    input.val(input.val().replace(/,/g, ''));
});
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.