How to create input mask

[heruprambadi]

Hello.
How to add input mask like this ?
I readed the documentation and found this.

It works with normal form, but it doesn’t work with master detail form. I can’t find event for master detail form.

[johnny]

Hello @heruprambadi ,

I don’t understand what is your question to be honest. Would you like to trigger this event but for detailed/master form?

Regards
Johnny

[heruprambadi]

Hello john. I want to create javascript input mask like this Edit fiddle - JSFiddle - Code Playground
How to create it in gc ? I try like this article JavaScript Events | Grocery CRUD v3 but doesn’t work.

Anyway, you can click on word “this” in my question above

[johnny]

Hello @heruprambadi ,

You will need to:

1. Enable the “publish_events” from configuration to true
2. Use callbackAddField | Grocery CRUD v3 and callbackEditField | Grocery CRUD v3 for your input and make sure that the input
3. Use the events ‘gcrud.form.add-load’ ‘gcrud.form.edit-load’. For example:

window.addEventListener('gcrud.form.add-load', ({detail}) => {
    // Your custom JavaScript here
});

I hope this helped.

Regards
Johnny

[heruprambadi]

Thx @johnny now i’m able to do it. I need this event “gcrud.form.add-load” to make it work.
I hope future GCE have feature like money input mask, because some user type 1.000.000, another user type 1,000,000, and the other type 1000000. We need to make standart for it.

For you who expriencing similar problem with me, i’m just gonna put it here, in case you need it.

callback add field in controller :

        $crud->callbackAddField('nama', function ($fieldType, $fieldName) {
            return '<input type="text" name ="nama" class = "myForm">';
        });

script in view file :

<script>
    window.addEventListener('gcrud.form.add-load', ({
        detail
    }) => {
        let input = document.getElementsByClassName("myForm");

        console.log(input.length);

        for (var i = 0; i < input.length; i++) {
            input[i].addEventListener("keyup", (e) => {
                formatCurrency(e.target);
            });
            input[i].addEventListener("keypress", (e) => {
                formatCurrency(e.target);
            });
        }

        function formatNumber(n) {
            // format number 1234567,89 to 1 234 567,89
            return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        }

        function formatCurrency(input) {
            var input_val = input.value;
            if (input_val === "") {
                return;
            }
            var original_len = input_val.length;
            var caret_pos = input.selectionStart;
            input_val = formatNumber(input_val);
            input.value = input_val;
            var updated_len = input_val.length;
            caret_pos = updated_len - original_len + caret_pos;
            input.setSelectionRange(caret_pos, caret_pos);
        }
    });
</script>

[heruprambadi]

i’m sorry @johnny , it works for normal form, but still doesn’t work for master detail form

[heruprambadi]

@johnny it doesn’t work if we use it on master detail :

But if we open master detail link directly, it works.

[johnny]

Hello @heruprambadi ,

That’s weird. I will check it and let you know. Probably during the weekend.

Regards
Johnny

[johnny]

Hello @heruprambadi ,

I confirm that this is a Grocery CRUD bug and this will be fixed for the next version.

I will keep you updated once the new version is released.

Regards
Johnny

[heruprambadi]

Ok @johnny , i’ll wait for the next version. Thank’s.

[johnny]

Hello @heruprambadi ,

I am glad to inform you that the new version is now released (3.0.15) . You can download it from here:

https://www.grocerycrud.com/users/enterprise-version-wizard

Let me know if you are still having issues with the publish of the events on master-detail grid.

Regards
Johnny

[heruprambadi]

thank you @johnny , it solved my problem
now i can using custom js for master-detail grid.

[heruprambadi]

Hello @johnny , i confirm this not work with the latest version of GCE (V3.1.4). I just update my GCE using “composer update --prefer-dist” and my input mask not working anymore. I try to replace my GCE with the old one, and it working again. Any solution for this ?

[johnny]

Hello @heruprambadi that’s weird since I haven’t changed anything related with this change. Can you please check if publish_events configuration is set to true ? This will only work when this is true, the default configuration is false.

Regards
Johnny

[heruprambadi]

Before update, the publish_events is true. So after update, it still true.

I dont know what’s the problem, but after update, my input mask does not work anymore.

And after i replace GCE file in vendor folder, it works.

[johnny]

Hello @heruprambadi ,

That’s weird! I will check it and let you know.

[johnny]

Hello @heruprambadi ,

Are you still having the same issues even with the latest version? 3.1.9 ?

Regards
Johnny