[CLOSED] Getting the value from TextField with InputMask plugin

[centerinform]

Hi,

I'm trying to read the value from the textfield with InputMask:

X.TextFieldFor(x => x.Phone, false).Plugins(X.InputMask().Mask("(999) 99-99-99"))

Resulting value (in form, in corresponding model and so on) has all special symbols from the mask like "-","(",")" etc. How to set the field value without it (but the user must see masked value!)?

[Daniil]

Hi @centerinform,

You can get unmasked value using this JavaScript code.

App.TextField1.inputMask.getUnmaskedValue();

Though, it might be problematic to get it automatically in a submitted data. How do you submit a form?

[centerinform]

Yes, the main problem is sending the form data. I submit it:

App.Form1.getFieldValues()

via the form action button (in the other place of code). Maybe, it's necessary to use some hidden field with the double-side sync?

[Daniil]

Then you could override the getModelData function.

<ext:TextField runat="server" Note="(999) 999-9999" FieldLabel="Phone">
    <GetModelData Handler="var me = this,
                               data = null;
                           if (!me.disabled && !me.isFileUpload()) {
                               data = {};
                               data[me.getName()] = me.inputMask.getUnmaskedValue(); //defaults to: data[me.getName()] = me.getValue();
                           }
                           return data;" />
    <Plugins>
        <ext:InputMask runat="server" Mask="(999) 999-9999" />
    </Plugins>
</ext:TextField>

See also
http://docs.sencha.com/extjs/4.2.1/#...d-getModelData

[centerinform]

Hi Daniil,

Overriding the GetModelData works but not in all cases. I also have the forms, where the dirtyChange event handler is using in order to watch out for any changes in the form, having been done by users. Applying the InputMask plugin, whereas the data is keeping in DB in unmasked view, makes the data "dirty". It makes semblance that user has changed the data. What can I do to make it works more correctly? (By the way, in the such forms I use GetSubmitData function overriding because GetModelData doesn't work because data is sent via "Send" button)

[Daniil]

I see...

It might be problematic to achieve that... I can suggest to try to use an additional Hidden field and load a database value to that Hidden field. Then synchronize the Hidden field with a TextField on client putting an unmasked value to the Hidden field and use it on submit. As for the TextField you can exclude it from submitting at all (SubmitValue="false"). Theoretically.

[centerinform]

Hi Daniil,

Thank's a lot for your help. The problem has been solved with small improvements:

	X.HiddenFor(x => x.Phone, false)
        .ID(id + "PhoneUnmasked")
        .Listeners(ls =>
        {
            ls.Change.Handler = "var fieldMasked = App." + id + "PhoneMasked; if (fieldMasked.inputMask.getUnmaskedValue() != this.getValue()) { fieldMasked.setValue(this.getValue()); fieldMasked.inputMask.validateMask(); }";
        }),
    X.TextFieldFor(x => x.Phone, false).DataIndex("PhoneMask")
        .ID(id + "PhoneMasked")
        .LabelAlign(LabelAlign.Top)
        .SubmitValue(false)
        .Listeners(ls =>
        {
            ls.Change.Handler = "var fieldUnmasked = App." + id + "PhoneUnmasked; if (fieldUnmasked.getValue() != this.inputMask.getUnmaskedValue()) { fieldUnmasked.setValue(this.inputMask.getUnmaskedValue()); }";
            ls.BoxReady.Handler = "if(this.mixins && this.mixins.field && typeof this.mixins.field['initValue'] == 'function') { this.mixins.field.initValue.apply(this); this.wasDirty = false; }";
        })
        .Plugins(X.InputMask().Mask("99-99-99"))
        .ColumnWidth(1)
        .LabelSeparator("")

The code in the BoxReady Handler has been added for correct opening of the form with the self-made button for the data sending (the Phone field was considered to be "dirty" for some reason). I found this solution here: http://stackoverflow.com/questions/1...rm-dirty-state

[Daniil]

Thank you for sharing!