Element Superior to Input

Asked

Viewed 42 times

0

Good morning, I’m putting a mask on a field that formats a phone number, but you can see that the field ID is #Field_11690, as it was created by a Wordpress plugin.

( function( $ ) {

// jQuery MeioMask.
$( '#field_11690' ).setMask( '(99) 9999-99999' ).ready( function( event ) {
    var target, phone, element;
    target = ( event.currentTarget ) ? event.currentTarget : event.srcElement;
    if ( 'undefined' === typeof type ) {
        return;
    }
    phone = target.value.replace( /\D/g, '' );
    element = $( target );
    element.unsetMask();
    if ( 10 < phone.length ) {
        element.setMask( '(99) 99999-9999' );
    } else {
        element.setMask( '(99) 9999-99999' );
    }
});

And for this reason I do not know if in production would continue the same ID, there is some other way I can declare the ID number of this field, or catch some Higher element?

jquery css

  • Good for what you can see from the field ID, I believe that the field ID can be dynamic, or it can also be fixed, the plugin can save the ID for that field and always keep the same. If that’s the case, all right, you’d better confirm it. If not, I believe that the ideal would be for you to take a higher element than the field, like the form, or even a div. And to find it via jQuery, I believe that it should maintain a hierarchy always, independent of the ID.

  • We can help you better if you could show us in production what the hierarchy of elements looks like. And also confirm that the field id is changed in some way, check that the plugin saves the data from the generated forms in the database (some do so).

  • Hello Vinicius, I did the test and in production it saves the name of the random ID, however I saw that in the div that contains the input I can use, how do I access the input with the class you have in div?

  • Could you post the hierarchy code? So I can better illustrate how to get to the input from this div that you have.

  • `<div class="editfield field_11690 field_phone-with-ddd required-field visibility-adminsonly alt field_type_textbox">

  • <input id="field_11690" name="field_11690" type="text" value="" " Aria-required="true" Aria-labelledby="field_11690-1" Aria-describedby="field_11690-3">`

  • Inside the Div This input, you can tell me, how to access it to put in the jquery function up there?

  • I’ll post the answer down there, can you confirm that the 'field_telefone-com-ddd' class will always be in that div? And inside that div is just that input or there’s more?

  • The Class, will always be yes in this Div, there is a <Legend id="field_11690-1" between the div and the input, Thanks for the help, so post I already test and mark as answer.

Show 4 more comments

2 answers

0


In case your DIV as mentioned is only the you can get the following code to get to it (considering that the class I will use reference does not change):

$('.field_telefone-com-ddd').find(':input').setMask('(99) 9999-99999').ready(function( event ) {
    var target, phone, element;
    target = ( event.currentTarget ) ? event.currentTarget : event.srcElement;
    if ( 'undefined' === typeof type ) {
        return;
    }
    phone = target.value.replace( /\D/g, '' );
    element = $( target );
    element.unsetMask();
    if ( 10 < phone.length ) {
        element.setMask( '(99) 99999-9999' );
    } else {
        element.setMask( '(99) 9999-99999' );
    }
});

This code will capture all elements (find()) of the kind input within the element with the reference class within the $, so it will only work in your situation, where there is only one input.

If there were more than one input, you could also capture the input order X with:

$('.field_telefone-com-ddd').find(':input:eq(X)')

Replacing 'X' with the order number of the input within the reference element.

  • 1

    Only for later search reasons, in the $('field_phone-with-ddd') field put the dot to indicate that it is a class.

  • Thank you for Help :D

  • @Brunoangeoletto really, I ended up not putting, thank you!

0

Deepening the Answer of Vinicius above (which already assured me the correct answer) I also looked for another way to solve and arrived at the code below.

( function( $ ) {
// jQuery MeioMask.
if ($('.field_telefone-com-ddd input').length !== 1) {
    return;
}
$('.field_telefone-com-ddd input').setMask('(99) 9999-99999').ready(function( event ) {
    var target, phone, element;
    target = ( event.currentTarget ) ? event.currentTarget : event.srcElement;
    if ( 'undefined' === typeof type ) {
        return;
    }
    phone = target.value.replace( /\D/g, '' );
    element = $( target );
    element.unsetMask();
    if ( 10 < phone.length ) {
        element.setMask( '(99) 99999-9999' );
    } else {
        element.setMask( '(99) 9999-99999' );
    }
});

}( jQuery ) );

Browser other questions tagged jquery css

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