Modifying form values with beforeSubmit with jQuery ajaxSubmit?

Question

I have a form I am submitting using jQuery's ajaxSubmit function from the Forms plugin. I'm trying to add a form name/value pair to the form data just before submission occurs. My plan is to modify the form data in the beforeSubmit event handler.

Given a function that looks like:

function handleActionFormBeforeSubmit(formData, form, options) {
    // Add a name/value pair here somehow to formData
}

How do I add a simple pair to formData? It is an array in the form of:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

Thanks, Brian

Answer 1

After an hour of experimentation, I figured out a solution. To append a value to the form data, the following code will work.

function handleActionFormBeforeSubmit(formData, form, options) {

    // Add a name/value pair indicating this is an asynchronous call.
    // This works with the ASP.NET MVC framework's Request.IsMvcAjaxRequest() method.
    formData[formData.length] = { "name": "__MVCASYNCPOST", "value": "true" };
}

You can also modify the data if you know the index of the value you want to change such as:

formData[0].value = 'new value';

I hope this helps someone else.

Answer 2

formData.push({ "name": "__MVCASYNCPOST", "value": "true" }); is fine.

Answer 3

For some reason changing the data in the beforeSubmit callback didn't work for me when I encountered this problem.

However assigning an object to "data" in the form options caused this object to be appended to the serialised data. This is not documented explicitly on the jquery form website but is part of the underlying $.ajax method.