Do not submit empty form fields in ExtJS

Question

I have an extjs form with fields. The user isn't required to enter data into each field so I do not want to submit the fields with no data. I want it to post only fields that actually have data. Is this possible?

Solution 1

I recommend using form's beforeaction event. While handling this event you can check all fields. If all values are empty just return false;. The following example works in ExtJS4 and has to work in ExtJS3:

myform.on('beforeaction', function(form, action) {
    if (action.type == 'submit') {
        var doSubmit = false, vals = form.getValues();
        for (var i in vals)
            if (vals[i] !== '') {
                doSubmit = true;
                break;
            }
        return doSubmit;
    }
});

Actualy, the right way to not submit empty fields is to use action's submitEmptyText config. But it's not working in current version (ExtJS4.0.2a).

Solution 2

Another options is to override component's getSubmitValue() method and return null if this field is empty, this way it won't be included into submit fields.

{
    xtype: 'combo',
    getSubmitValue: function(){
        var value = this.getValue();
        if(Ext.isEmpty(value)) {
            return null;
        }
        return value;
    }
}

Solution 3

Instead of using form's submit, directly call Ext.Ajax.request(...) with the url, method type (GET/POST) and params (and any other options as explained in the call documentation). To generate params, iterate over the form fields and check for null value before adding to params.

Solution 4

This bug is present in ExtJS 4.0.7 too.

As Molecule Man pointed:

Actualy, the right way to not submit empty fields is to use action's submitEmptyText config. But it's not working in current version (ExtJS4.0.2a).

A possible solution to fix this bug is by overriding 2 functions, getValues in "Ext.form.Basic" (where the bug is) and createForm (to create our basic form) in "Ext.form.Panel" by extension in the following way:

Ext.define("My.form.Basic", {
    alias: "form.mybasic",
    extend: "Ext.form.Basic",
    getValues: function(asString, dirtyOnly, includeEmptyText, useDataValues) {
        var values = {};

        this.getFields().each(function(field) {
            if (!dirtyOnly || field.isDirty()) {
                var data = field[useDataValues ? "getModelData" : "getSubmitData"](includeEmptyText);
                if (Ext.isObject(data)) {
                    var isArray = Ext.isArray;
                    Ext.iterate(data, function(name, val) {
                        if (includeEmptyText && val === "") {
                            val = field.emptyText || "";
                        }
                        if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0))) {
                            if (name in values) {
                                var bucket = values[name];
                                if (!isArray(bucket)) {
                                    bucket = values[name] = [bucket];
                                }
                                if (isArray(val)) {
                                    values[name] = bucket.concat(val);
                                }
                                else {
                                    bucket.push(val);
                                }
                            }
                            else {
                                values[name] = val;
                            }
                        }
                    });
                }
            }
        });

        if (asString) {
            values = Ext.Object.toQueryString(values);
        }
        return values;
    }
});

Ext.define("My.form.Panel", {
    alias: "form.mypanel",
    extend: "Ext.form.Panel",
    createForm: function() {
        return Ext.create("My.form.Basic", this, Ext.applyIf({listeners: {}}, this.initialConfig));
    }
});

The code is copied from the ext source code. The only change is inside the iteration of each field: introduced the following wrapping "if":

if (includeEmptyText || ((!isArray(val) && val !== "") || (isArray(val) && val.length !== 0)))

I am a bit late but, better later than never...

View more solutions

Comments

[James McMahon]

The Sencha docs are a little unclear, but I think you are incorrect about submitEmptyText's use. SubmitEmptyText makes is evaluated only when a field is '' (empty) and then just replaces the empty string with the emptyText property. If set to false, it just leaves the empty strings as is, which means they would still be included with the request.

[pdizz]

Just call form.getValues(false, true); The second parameter is dirtyOnly=true which means you only get fields with values in them.

[Tsahi Asher]

@pdizz That's not correct. This will only get dirty fields, so if you have fields with prefilled values (e.g. hidden fields) this won't get them.