Cannot apply masks to modal input fields

Grocery CRUD Enterprise
1

I’m using GCE latest version with CI4 framework and when I try to apply some mask to input fields - mainly to float/decimal(10,2) fields - those values are changed (and masks are removed) when submitting! An example from customers table (tried with other mask library and a library of my own, none worked).

My main concern is that the value is changing on submit (see attached video).

ScreenRecorderProject6

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js"></script>

    <script>
        $(document).ready(function() {
            const setupMasks = async () => {
                await new Promise(resolve => setTimeout(resolve, 300));
                $('#gc-form-creditLimit').mask("#.##0,00", {
                    reverse: true,
                    selectOnFocus: true
                });
            };
            window.addEventListener('gcrud.form.edit-load', setupMasks);
        });
    </script>

What is happening here? Why the value is changing? Are there any validation taking place in the GCE library here? How can I apply proper monetary formating (with symbols) to all decimal(10,2) fields in the add and edit modal forms?

TIA.

2

Hi @johnny! Did you get some time to look at this?

3

Hello @bgeneto ,

From further investigation it seems that you are trying to apply directly data to a React component. The best way to do that is by using callbackEditField and callbackAddField which on purpose I’ve added extra code so you can manipulate the data. More specifically on submit it searches the input with name as the field name and it is sending any value is at that field dynamically.

So for example in your case you can have something like this:

$crud->callbackEditField('notes', function ($fieldValue) {
    return '<div><input class="form-control gc-form-notes" name="notes" type="text" value="' . $fieldValue . '"></div>';
});

Notice also that I’ve removed the “id” since there is a duplicate id on the callback edit field (I’ve lost one hour of my life not knowing why this was not working :slight_smile: )

The only other thing that you need to make sure is that you have a name at your input and it is the same as the callbackEditField or callbackAddField. In our example “notes”

So your script is better to change like this:

// Instead of # I am using . (class name)
$('.gc-form-creditLimit').mask("#.##0,00", {
                    reverse: true,
                    selectOnFocus: true
                });

This works also for the latest Grocery CRUD. Let me know if that worked for you.

Regards
Johnny