CODEWITHSUNDEEP
javascriptjqueryformspost
Patricia
Patricia

Reputation: 7802

my jquery-built form is submitting, but not sending any of the values!

I'm trying to do something like the plugin found here: http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/ does. I was originally just going to use that, but it was having a lot of trouble with dates. So i thought i'd try changing it up a bit...

here's my version of the plugin:

jQuery.download = function (url, data, method) {
if (url && typeof data == 'object') {
    //for this version, data needs to be a json object.  
    //loop through the data object..

    var theForm = $('<form></form>').attr('action', url).attr('method', method).attr('id', 'jqueryDownloadForm');

    $.each(data, function (propertyName, propertyVal) {

        theForm.append($("<input />").attr('type', 'hidden').attr('id', propertyName).val(propertyVal));
    });

    theForm.appendTo('body').trigger('submit').remove();
}
else {
    //they didn't fill in the params.  do nothing
}

};

and here's how it's being called:

var dataToPost = { reportFormatId: reportFormatId, reportPageSizeId: reportPageSizeId, reportSortOrderId: reportSortOrderId, rangeStart: rangeStart, rangeEnd: rangeEnd};
 $.download('/The/Url/', dataToPost, "POST");

It builds the form and submits. but it doesn't send any of the inputs.

if i loop through theForm.find('input') they all have values. but looking at the post with fiddler, there is nothing being posted. and my mvc controller is giving me null parameter errors.

Thanks in advance for your help!

EDIT: I tried adding a button to the form. like so:

theForm.append($("<input />").attr('type', 'submit').attr('id', "ExportForm").val("Export"));

and not submitting from JavaScript. If i click the button, it doesn't send any of the data either.

Upvotes: 1

Views: 1150

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

The <input> elements that you're generating don't have a name attribute. Since that attribute (not id) is used to identify the controls when posting the form, nothing is actually submitted to the server.

Try something like:

theForm.append($("<input />").attr("type", "hidden")
    .attr("name", propertyName).val(propertyVal));

Upvotes: 2

Related Questions