Alter form data using the beforesubmit event

[semiaddict]

According to the documentation of the event beforesubmit in Ext.form.Panel , I should be able to modify the values submitted, but I can't figure out how.

Implementations may adjust submitted form values or options prior to execution.

I've tried modifying the variable values, but this has no effect.

Any help is highly appreciated.

Note: I'm basically trying to send a JSON string, so I need to encode the values using JSON.stringify.

[rdougan]

This looks like a bug. Thanks for the report.

[rdougan]

This is working for me, using the following block of code:

var form = Ext.Viewport.add({
    xtype: 'formpanel',
    items: [
        {
            xtype: 'textfield',
            label: 'one',
            name: 'name',
            value: 'go'
        },
        {
            docked: 'bottom',
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'submit',
                    handler: function() {
                        form.submit({
                            method: 'POST',
                            url: 'test'
                        });
                    }
                }
            ]
        }
    ],
    listeners: {
        beforesubmit: function(form, values, options) {
            values.test = "hello";
        }
    }
});

This will post: 'name=go&test=hello'

[mschering]

This does not seem to work in ST 2.3.1!

[beldar]

Any updates about this?

I'm trying to add/change/format the values of the submit just like rdougan said, but is not working.

Please help!

[bruijn88]

I'm running into the same issue. The server expects a timestamp, but the form is sending something like:
Tue Jan 01 1980 00:00:00 GMT+0100 (CET)

I'm trying:

onBeforeSubmit: function (form, values, opts, evt, eOpts) {
    var timestamp = Ext.Date.format(values.dateOfBirth, 'U');
    values.dateOfBirth = window.parseInt(timestamp, 10);
} 

to no avail. Using ST 2.3.1
Is there a workaround/override?

[bruijn88]

I did some more digging and found the following.


Ext.form.Panel#submit does:

...
return me.fireAction('beforesubmit', [me, formValues, options, e], 'doBeforeSubmit');
... 

If you look at Ext.mixin.Observable#fireAction, it says:

Fires the specified event with the passed parameters and execute a function (action) at the end if there are no listeners that return false.

But if i step through the code using dev-tools, Ext.form.Panel#doBeforeSubmit (where the actual request is being done) is executed before my own event handler. This makes it quote obvious that the values cannot be altered before the request as documented by the Ext.form.Panel#beforesubmit event.

[bruijn88]

Did some more digging and found a workaround.

As stated above, Ext.form.Panel#doBeforeSubmit is executed before any listeners attached to the Ext.form.Panel#beforesubmit event. This is because the Ext.mixin.Observable#fireAction takes 2 more (undocumented) parameters, 'options' and 'order'. The last one indicates if the so called action, (Ext.form.Panel#doBeforeSubmit in this case) is executed before or after the registered listeners. The default seems to be before. To get around this i've overridden Ext.form.Panel#submit as follows:

Ext.define('My.form.Panel', {
    override: 'Ext.form.Panel',

    submit: function(options, e) {
        var me = this,
        formValues = me.getValues(me.getStandardSubmit() || !options.submitDisabled),
        form = me.element.dom || {};

        if(this.getEnableSubmissionForm()) {
            form = this.createSubmissionForm(form, formValues);
        }

        options = Ext.apply({
            url : me.getUrl() || form.action,
            submit: false,
            form: form,
            method : me.getMethod() || form.method || 'post',
            autoAbort : false,
            params : null,
            waitMsg : null,
            headers : null,
            success : null,
            failure : null
        }, options || {});

        // make sure 'doBeforeSubmit' is executed after any registered listeners
        return me.fireAction('beforesubmit', [me, formValues, options, e], 'doBeforeSubmit', me, {}, 'after');
    }
}); 

This fixes the order of execution problem, but we're not out of the woods yet.
The 'values' parameter passed to the Ext.form.Panel#beforesubmit listener essentially gets tossed in Ext.form.Panel#doBeforeSubmit, so changing that in the listener is of no use. I figured i could instead set the value on the 'options.params' property, but unfortunately when the final querystring for the request is being assembled in Ext.data.Connection#setupParams, the serialized form (which still contains the old, non overridden value) is put after the params you just set, resulting in something like:
valueToOverride=newValue&foo=bar&baz=qux&valueToOverride=oldValue
and since the last one takes precedence, the old value is still the one you receive on the server end.

To work around this problem you can just set the value of the form in the event listener like so:

onBeforeSubmit: function (form, values, options, e, eOpts) {
    // this has no effect
    values.valueToOverride = 'newValue';

    // neither has this
    options.params = {
        valueToOverride: 'newValue'
    };

    // this does the trick
    Ext.fly(options.form).down('input[name=valueToOverride]', true).value = 'newValue';
} 

Hope this helps anyone.