CODEWITHSUNDEEP
javascriptforms
Ceottaki
Ceottaki

Reputation: 744

How to get an object with each element passed as a key to a post form?

I have a situation where I need to dynamically create a form using javascript, to support some legacy browsers. The data I need to send through the form is currently in an object, so, for example:

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");

// Append data to the form somehow.

myForm.submit();

I feel like this should be something simple to do but I must be missing something obvious. What I would like would be to have something that passed the form the data as a key per property of data, so something like "name=John%20Doe&age=35" for the example above. And I would like to do this without having to do the following:

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");

// NOT what I would like:
var formField1 = document.createElement("input");
formField1.setAttribute("type", "hidden");
formField1.setAttribute("name", "name");
formField1.setAttribute("value", data.name);
myForm.appendChild(formField1);

var formField2 = document.createElement("input");
formField2.setAttribute("type", "hidden");
formField2.setAttribute("name", "age");
formField2.setAttribute("value", data.age);
myForm.appendChild(formField2);

myForm.submit();

So, is there any way to append my data that way without looping through data's properties to add each one as a hidden field?

Also, please beware that my data properties could be objects or arrays themselves.

UPDATE

This is my current solution, but I was looking for a more straightforward way of passing the data without having to iterate through the data object, but from all the answers here it looks like there's no other way:

var data = { name: 'John Doe', age: 35 };
var myForm = document.createElement("form");
myForm.setAttribute("action", myPostActionPath);
myForm.setAttribute("method", "post");

$.each(data, function(name, value) {
    var formInput = document.createElement("input");
    formInput.setAttribute("type", "hidden");
    formInput.setAttribute("name", name);
    formInput.setAttribute("value", value);
    myForm.appendChild(formInput);
});

myForm.submit();

And just to explain a bit better, I am using this action to download a file after sending some data back to the controller and IE8 and IE9 won't allow a file to be downloaded through an AJAX post so this is a fall-back that allows me to download the file without having to submit the original form which would cause an undesirable full page refresh.

Upvotes: 0

Views: 55

Answers (3)

ncubica
ncubica

Reputation: 8495

Second attempt what about //assuming jquery you can modify for pure javascript, im just too lazy and I want to help not make your job :P

var data = { name: 'John Doe', age: 35 }

var arrTemplate = [];
arrTemplate.push("<form id='whateverID' action='' method=''");
for (var k in data){
    if (data.hasOwnProperty(k)) {
         arrTemplate.push("<input type='hidden' name='"+ k +"' value='"+ data[k] +"'>");
    }
}
arrTemplate.push("</form>");

$(document).append(arrTemplate.join(""));
$("#whateverID").submit();
//then you could remove the form if you want to.

is this what you want???

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816760

So, is there any way to append my data that way without looping through data's properties to add each one as a hidden field?

Unfortunately there is not: HTMLFormElement API.

Upvotes: 2

ncubica
ncubica

Reputation: 8495

what about json.stringify in an input hidden? then you can decode the json in you server side and have all you want.

here its an similar example which its not answer specifically your question buts its using your technique.Send a PDF URL in a browser to the printer via iframe

see the javascript part.

Upvotes: 0

Related Questions