Does your question relate to entering data in the back-end on the post edit screen, on a front-end CRED form, or somewhere else, such as when used as a filter in a View.
You have been adding custom JS to modify the attributes of the input field.
You are now trying to also use the jQuery Mask plugin to restrict entries on the same input fields.
It's not working. What do you mean by it's not working?
I tried a few simple tests on a local site with this and didn't see any problems.
I have a View with a filter for a numeric custom field where the filter is for the minimum value.
Simple fields are stored in the database as strings, and the inputs themselves are strings, but adding the attr number restricts the input to numbers. I then used the Mask plugin to limit this further and also limit the input to a single digit. For good measure I added the step attr so that using the UI arrows the number changes in increments of 2.
It all worked, including when submitting the filter to update the results, as you can see in the gif. (You can't see me trying to type more than a single digit, but I was doing it.)
So there doesn't appear to be a problem using the Mask plugin on the input fields in principle. If you are having problems it may be because of the specifics of the rules you are trying to enforce.
I'm not sure, to be honest, looking through the docs I can't see what the reverse: true argument is for, for example, and if you have questions about the right format you should ask the developer.
But I can foresee you running into problems with this.
If you are using a mask so that the someone entering a monetary amount sees it formatted as "11,500" for example, then that is the value submitted by the filter control form, rather than the clean "11500".
So I expect that may break the functionality of your filter. You would have to intercept the form submission and reformat the field value so that it is a simple number that gets submitted, rather than this reformatted version created by the mask plugin.
Also, that is probably why you were experiencing problems trying to add an attribute of type = "number" together with a mask to format the number, as the number type input doesn't accept commas.
toolset value stored is still not formatted. raw digits,
when user enter value in the filter its formatted on the fly.
i need to intercept the submiision and reformat the value to raw then submit.
this sound so complicated to me. is there any sample code on how to intercept the submission ?
The plugin has a method to get the "unmasked" or raw version of the input, so if you have a number formatted with commas, you can get the raw number: hidden link
So you could use jQuery submit to intercept the form submission and change the field back to its unmasked version before submission.
this is what i can think off with my half baked js
( function( $ ) {
$( document ).ready( function(){
$("input[name='property-price_min']").mask('#,##0', {reverse: false});
$("input[name='property-price_max']").mask('#,##0', {reverse: false});
});
})( jQuery );
(function( $ ) {
//reset to raw value
function reset_value(){
$("input[name='property-price_min']").cleanVal();
$("input[name='property-price_max']").cleanVal();
}
//run in when the view ajax search is updated
$(document).on('js_event_wpv_parametric_search_results_updated', function(){
reset_value();
});
//run in when the page is loaded first time
reset_value();
})(jQuery);
