Masks in form fields in modal Woocommerce

Asked

Viewed 181 times

2

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

I inserted two new fields in my Woocommerce login screen, cell phone and Cpf fields, both I would need to have masks.

I got through internet searches 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 and registration screen is in modal, so even if you insert in is_page() the name of the page that is login and registration does not work, but 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 my account page.

Could someone give me a little help?

php javascript jquery woocommerce

1 answer

0

Take a test like this:

Create a javascript file with the code you want to run. For example, "seujavascript.js" and include in 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.

Browser other questions tagged php javascript jquery woocommerce

You are not signed in. Login or sign up in order to post.