Masks in form fields in woocommerce

Question

Masks in form fields in woocommerce

Navigation

#1 by (0 votes)

2

I have a problem that I think is a simple solution, but as I am a layman in javascript and jquery would like a help from you.

I inserted two new fields into my woocommerce login screen, these fields for mobile and cpf, both of which I would need masks.

I have searched the internet for the following code in Jquery:

/* Acionamento do arquivo javascript */

<?php

function mascara_cadastro_cliente(){
             
      if( is_page('minha-conta') )
      wp_enqueue_script('masked-input', 'http://meusite.com.br/wp-content/themes/flatsome-child'.'/js/jquery.maskedinput.min.js', array('jquery'));
  
}
add_action('wp_enqueue_scripts', 'mascara_cadastro_cliente');


/* Inserção das máscaras nos campos CPF e Celular */

function activate_masked_input(){
   if( is_page('minha-conta') ){
?>

<script type="text/javascript">
                jQuery( function($){
                      
                     jQuery("#reg_billing_cpf").mask("999.999.999-99");
                     jQuery("#reg_billing_cellphone").mask("(99)99999-9999");
                });
 
         </script>
 

<?php 
   }
}
add_action('wp_footer', 'activate_masked_input');
?>

This code works perfectly, but only in a common window, the problem appears now, my login screen and register is in modal, so even inserting in is_page () the name of the page that is the login and register the same does not work, however if I open the same page in another tab, without being in modal the masks work perfectly. The impression I have is that when opened in modal the javascript code is not triggered by the my-account page.

Can someone give me a hand?

php javascript jquery woocommerce

asked by anonymous 23.10.2016 / 03:33

1 answer

How to insert a file into an array How to avoid image scrolling?

score 0 · Answer 1

Do a test like this:

Create a javascript file with the code you want to run. For example, "sujavascript.js" and include it:

   jQuery("#reg_billing_cpf").mask("999.999.999-99");
   jQuery("#reg_billing_cellphone").mask("(99)99999-9999");

And no functions:

  function mascara_cadastro_cliente(){             
  if( is_page('minha-conta') ) {
         wp_enqueue_script('masked-input', 'http://meusite.com.br/wp-content/themes/flatsome-child'.'/js/jquery.maskedinput.min.js', array('jquery'));
         wp_enqueue_script('seujavascript', 'http://meusite.com.br/wp-content/themes/flatsome-child'.'/js/seujavascript.js', array('jquery'));  
  }
  add_action('wp_enqueue_scripts', 'mascara_cadastro_cliente');

If your jquery library is being loaded, your script should also be.

I hope it helps in the final solution.