Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filtering/modifiying input fields before submitting #2263

Open
bilo1967 opened this issue Sep 9, 2021 · 1 comment
Open

Filtering/modifiying input fields before submitting #2263

bilo1967 opened this issue Sep 9, 2021 · 1 comment

Comments

@bilo1967
Copy link

bilo1967 commented Sep 9, 2021

Apologies for my poor understanding of JTable.
Maybe what I'm asking is obvious but I couldn't find an answer.

I've a table showing records with some particular text field.
I wish to do some simple automatic things like trim spaces from these fields or convert them to uppercase or lowercase right after input and before submitting the form.
I've defined some CSS classes like 'trim-value', 'uppercase-value', ..., associated them to the fields with inputClass and added handlers for their onfocusout event like this:

$(document).on('focusout', '.trim-value', function() {
    $(this).val($(this).val().trim());
});

$(document).on('focusout', '.uppercase-value', function() {
    $(this).val($(this).val().toUpperCase());
});

// ...

It works, but I wonder if this the right approach. Is there a specific event for handling field filtering?

@misterparsons
Copy link

misterparsons commented Mar 9, 2022

Hi,
As you say it works. There is no specific jTable event so there is no right or wrong way to code your problem, only a matter of coding style / taste.
I would have encapsulated it all in the field definition using an input option.

myField: {
    name: "Upper case field",
    input: function (data) {
        return $("<input type='text' name='myField'")
                .val(data.Record.myField)
                .change(function (e) {
                    $(e.target).val($(e.target).val().trim());
                });
    }
}

I used the change event rather than focusout, to avoid unnecessary execution, where the user tabs through the input fields without making changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants