[Resuelto] input type atttr conflict

[Autor]

Mensajes

[Akhil]

Hi. my attribute was working fine all the file.
now i added a "input mask script" to mask the input.

it seem they dont work well.

Meaning its either ONE working at one timme , i need to disable the other.

I also notice the code is always input type = text even for numbers . Pls advice. thanks

ill try to provide more info soon.

[Akhil]

//$("input[name='property-price_min']").attr('type', 'number');
$("input[name='property-price_min']").mask('#,##0', {reverse: true});
//$("input[name='property-price_min']").attr('step', '100');
// $('input[name="property-price_min"]').attr("min", "5000");

these are the 2 js code script that dont output at the same time

script i am using : enlace oculto

[Nigel]

Sorry, can you clarify what the problem is.

You have a Types custom field.

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?

[Akhil]

Hi. It's filter view .
Not working meaning no output.

[Nigel]

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.)

This was my custom JS:

( function( $ ) {
	$( document ).ready( function(){
		
      $("input[name='wpv-wpcf-upvotes']").attr('type', 'number');
      $("input[name='wpv-wpcf-upvotes']").attr('step', '2');
      $("input[name='wpv-wpcf-upvotes']").mask('0');

	});
})( jQuery );

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.

[Akhil]

Thanks Nigel for the detail explanations.

perhaps its my mask that not right .'

$("input[name='property-price_min']").mask('#,##0', {reverse: true}); 

is this valid or correctr for a sample value like 1,000 / 20,000 / 200,000 / etc . ?

[Nigel]

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.

[Akhil]

Hi Nigel i tested your code.
the result i achieve was below

1. the digit is always max single .
2. pressing the increment , it goes from 2,4,6,8, then reset to 1.
3. entering 1000 will stop at 1.

is this same for you as well.?

[Akhil]

Yes Nigel you're right, i didn't test the result and still using it.

thanks for the explanations, it make sense to me, do you have other alternative suggestion for this case ?

thanks

[Akhil]

Hi Nigel if i understand correctly.

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 ?

[Nigel]

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: enlace oculto

So you could use jQuery submit to intercept the form submission and change the field back to its unmasked version before submission.

I'm not sure there is much else you can do unless you want to start adding client-side code to modify the filter parameters using wpv_filter_query for example (https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query).

[Akhil]

Hi Nigel.

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);

any help on this please.

[Nigel]

That looks overly complex.

I used the following code to set a mask that accepts a number in the format 0,0, and then I switch that to the clean version when the form submits.

( function( $ ) {
	$( document ).ready( function(){
		
      $("input[name='wpv-wpcf-upvotes']").mask('0,0');

	});

	$('form').submit( function( e ){
		var cleanVal = $("input[name='wpv-wpcf-upvotes']").cleanVal();
       	$("input[name='wpv-wpcf-upvotes']").val( cleanVal );
    });

})( jQuery );

You will probably want a more specific selector for your form.

[Akhil]

Thanks Nigel.

it seems working but the mask value is wrong i think.
it doesnt accept 10 000 000 etc, .

the result page url output:......price_min=10%2C000%2C000

[Akhil]

ok. thanks