On our site we allow people to search for finance products so we have a filter form which takes input from the user in the form of a number (ie 30000) and this is then filtered against the matching finance products which works fine.
What the client has asked for, however, is that we format the number as the user types it to include thousand separators so we've added in some jQuery on keyup to do this which works fine at hidden link, the problem is that the thousand separator is then used in the filter which stops it working properly since it's not a strict number any more.
What I think we need to do is to be able to allow the jQuery to run on the inputs but then to have the thousand separators removed again when the filter is applied? Is there a way we can format those two specific fields back to strict numbers so the filtering works properly?
These numbers are stored as simple integers on the backend ? This means they are stored without any formatting ?
The problem that we will run into is we cannot remove the formatting quick enough using jQuery because the form would already be submitted.
I think the best solution to this is to format the number itself when you're entering it on the backend so it stores with the correct formatting.
The problem we will have with this now is that because we won't be able to do min and max with string values and pure number fields can't have any formatting.
That's right, the numbers are stored as integers rather than strings in the backend (ie 35000 instead of 35,000) which is required in order to get the functionality of those numbers being checked they fall between a number range.
Is it not possible to use a function using the wpv_filter_query hook to re-format the numbers being sent to the filter query? So the person enters 35000, Jquery formats this as 35,000 on keyup, then when the user submits the form the actual value passed to the filter query is adjusted back to 35000 before being filtered on?
I thought the above method might be the cleanest but another idea I'd had was to add in two manual hidden fields and when someone enters a value 30000 then the JQuery script formats this as 30,000 but also copies that value (without formatting, so 30000) into the hidden field. I could then adjust the form's filtering to filter by the hidden field's value rather than the visible (formatted) field?
I just thought of an Idea using your hidden fields.
When the user is typing in the field you can copy over their value with the keyup method for jquery into a hidden input field.
This field you can use to submit the actual value in the URL. The current field will only be there for display purposes but the actual field for the submit would be hidden.
The approach which worked for me was to hide the field from the post type (min loan) on which the filtering is performed, then to add a new manually-added field to the filter form "min-loan-formatted". It is this latter one which the user enters the number into and jQuery formats into thousands for us, ie 30000 becomes 30,000.
The same jQuery script also copies that value into the hidden "min loan" field but strips the commas this time, so its value is 30000.
This is therefore the value in which the filtering is performed and the manually created "min-loan-formatted" field is merely used for displaying the search amount to the user in a more user-friendly manner.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.
