Why FormData post disabled html fields?

Question

I'm using jquery $.ajax(); function to post data of a form, to get the data of the form i'm using new FormData because in my form there is an input file too.

The problem is i've disabled fields too in my form, those normally are not posted, but if i use new FormData they are.

How to solve this problem? I don't need to post disabled input fields!

why are u using `new` keyword, besides that after using the new keyword, you can code to disable the fields again, dnt it will work — HarshSharma, Jan 31 '14 at 11:38
Question No. 1 is do you need those disabled fields? Question number two, since input fields are added to FormData object by append method - arent you adding those disabled fields to your FormData object? — jave.web, Jan 31 '14 at 11:39
Could you please [edit] your post to show us the code you're using? — Bergi, Jan 31 '14 at 12:40

score 2 · Answer 1 · answered Jan 31 '14 at 13:03

How about building the FormData with only the fields you want:

// New FormData, get form and inputs
var payload = new FormData(),
    $form = $("form")
    $inputs = $("input", $form);

// For each input
for (var i = 0, l = $inputs.length; i < l; i++) {
    // Cache jQuery selector for input and get disabled attr
    var $input = $(inputs[i]),
        disabled_attr = $input.attr("disabled");

    // If the disabled attr is undefined or false
    // see http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element
    if (disabled_attr === "undefined" || disabled_attr === false) {

        // Append the key value pair to the FormData
        payload.append($input.attr("name"), $input.attr("value"));
    }
}

You should now be able to submit the FormData using data on $.ajax. If this fails, you can submit it using vanilla JavaScript:

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.send(payload);

score 0 · Answer 2 · answered Jan 31 '14 at 11:54

0

I don't know much about new FormData, but here is an alternative solution. If your form doesn't contain too many fields, use data property of $.ajax() call and send the required fields and their values only to the server. Sample syntax will be like as following

$.ajax({
type: "POST" OR "GET",
url: "/someUrl",
data: 
{
  'id' : $('#empId').val(),
  'name' : $('$empName').val()
} ,
dataType: "json",
success: function(result){
    alert(result);
}});

answered Jan 31 '14 at 11:54

Mahesh Modukuru

51
4

1

OP said his form does contain ``s, with which your method does not work. This question *is* about `Formdata`… – Bergi Jan 31 '14 at 12:39
Then we can use "multipart/form-data" technique to send data. Please refer to the posts http://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean and http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax for more info – Mahesh Modukuru Feb 06 '14 at 11:43
@Makesh: Yes, that's exactly what the OP did but with which he had problems. – Bergi Feb 06 '14 at 12:34

score 0 · Answer 3 · answered Jan 31 '14 at 16:18

The problem is i've disabled fields too in my form, those normally are not posted, but if i use new FormData they are.

According to the XHR and HTML5, they indeed must not be serialized. You should submit a bug against those browsers who do.

How to solve this problem? I don't need to post disabled input fields!

I you just don't need them, wait for a fix. If you require them to be omitted, you could try the following workaround:

var $form = /* whatever you have */;
var $inputs = $form.find(":disabled").each(function() {
    $(this).data("xhr-name", this.name);
    this.name = ""; // fields with empty names must be ignored as well
});
var formdata = new FormData($form[0]);
$inputs.each(function() {
    this.name = $(this).data("xhr-name");
});

If this neither works, you could a) completely detach the inputs from the DOM and restore them later, or b) construct the FormData manually.

Why FormData post disabled html fields?

3 Answers3