volosoft / jtable

A JQuery plugin to create AJAX based CRUD tables.
http://www.jtable.org
1.1k stars 506 forks source link

Filtering/modifiying input fields before submitting #2263

Open bilo1967 opened 3 years ago

bilo1967 commented 3 years ago

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 commented 2 years ago

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.