[Rocky Losli]

I am having trouble getting the phone field to be masked. I added the following code to the head section of my theme:

(script type=”text/javascript” src=”https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js”)(/script)

(script type=”text/javascript”)jQuery(document).ready(function ($) {
$(“.cn-phone”).mask(“(999) 999-9999”);
});(/script)

*Replaced < with (

I added the class “phone” to the field which renders as .cn-phone in the browser.

From class.metabox-entry.php:

echo '<div class="widget-inside">';

                cnHTML::field(
                    array(
                        'type'     => 'text',
                        'class'    => 'phone',
                        'id'       => 'phone[::FIELD::][number]',
                        'required' => FALSE,
                        'label'    => __( 'Phone Number', 'connections' ),
                        'before'   => '',
                        'after'    => '',
                        'return'   => FALSE,
                    )
                );

Any ideas?

[Steven Zahm]

@ Rocky

Since the phone number field does not exist until the add phone button is clicked the input mask added by the Masked Input will not be applied. This is because it is only being applied to fields which exist on the documented loaded event.

What you need to do is edit the JS for Form, cn-form-user.js and cn-form-user.min.js to add the Masked Input to the field add function. I think simply adding $('.cn-phone').mask('(999) 999-9999'); as the last line to the add function will be enough.

Hope that helps!

[Rocky Losli]

Thank you. That worked a treat.

Cheers!

[Steven Zahm]

@ Rocky

Great to hear!

If you have a moment, I would truly appreciate a review. Many thanks in advance!

https://wordpress.org/support/view/plugin-reviews/connections

[Author]

Posts