Sometimes it is necessary to post the data from a HTML form not by using a submit request (e.g. through a submit button or a (JQuery) submit call) but by using an asynchronous request. This may come handy for example for single-page applications, or if a download is triggered by submitting the data. In the latter case, you might want to display a small dialog box telling the user that the data is being prepared for download. Hint: Handy for this job is a JQuery plugin by John Culviner.
Suppose you have a MVC controller in the backend, which expects a certain data model coming with the submit/POST request. Somehow you need to prepare the form data such that you can post it to the controller in the appropriate format. Usually, this is done automatically by the browser when you press the submit button. If we want to do the POST from JavaScript, we need to wrap the data ourselves. Fortunately, this is not so hard. We just need to build an object out of the form elements that hold user input data. A simple solution would be (using JQuery, and it is TypeScript, by the way, but the JavaScript version almost looks the same):
var form2object = (formName: string): any => {
var data = {};
var allChildren = $(document.getElementById(formName)).find("input, select");
for (var i = 0; i < allChildren.length; i++) {
var child = allChildren[i];
var c_name = $(child).attr("name");
var c_val = $(child).val();
data[c_name] = c_val;
}
return data;
}
As you can see, we select all children of the form that are either input or select elements. For each of these, we add a new property to a dynamic data object where the name attribute is being used as the property name. This is compatible with the way ASP.NET MVC does the model binding. The value of the property becomes the the value of the form element. This data object can then be used in a JQuery $.ajax(... call, for example.
