javascript - Excluding invisible form elements from FormData object - Stack Overflow

admin管理员组

文章数量:1290934

I am using a bination of Javascript and jQuery to create a FormData object to send form data via AJAX request. This was my original code:

// $form is a jQuery object of the form in question
var formData = new FormData($form[0]);

My problem is finding a concise way to exclude invisible (i.e. .not(':visible')) elements from the data collected by the FormData object. I know that I could easily do this using jQuery's serialize() method, but I need to use FormData in this particular instance due to the upload of image files.

The only way I have managed to make this work is with the following code:

// $form is a jQuery object of the form in question
// Clone the original form
var $formClone = $form.clone();

// Remove invisible items from form
$form.find('input, textarea').not(':visible').remove();

// Collect form data with invisible items removed
var formData = new FormData($form[0]);

// Replace form with cloned form which retains invisible elements
$form.replaceWith($formClone);

I can't simply remove invisible elements from the clone and pass that to FormData, as none of the clone is visible unless I attach it to the DOM so all data elements are removed. So, my only solution was to clone the original form, and reserve the clone to re-attach to the DOM after removal of invisible elements from the original form.

I worry that using this method isn't very efficient. Is there a simpler way of achieving this?

I am using a bination of Javascript and jQuery to create a FormData object to send form data via AJAX request. This was my original code:

// $form is a jQuery object of the form in question
var formData = new FormData($form[0]);

My problem is finding a concise way to exclude invisible (i.e. .not(':visible')) elements from the data collected by the FormData object. I know that I could easily do this using jQuery's serialize() method, but I need to use FormData in this particular instance due to the upload of image files.

The only way I have managed to make this work is with the following code:

// $form is a jQuery object of the form in question
// Clone the original form
var $formClone = $form.clone();

// Remove invisible items from form
$form.find('input, textarea').not(':visible').remove();

// Collect form data with invisible items removed
var formData = new FormData($form[0]);

// Replace form with cloned form which retains invisible elements
$form.replaceWith($formClone);

I can't simply remove invisible elements from the clone and pass that to FormData, as none of the clone is visible unless I attach it to the DOM so all data elements are removed. So, my only solution was to clone the original form, and reserve the clone to re-attach to the DOM after removal of invisible elements from the original form.

I worry that using this method isn't very efficient. Is there a simpler way of achieving this?

• javascript
• jquery

Share Improve this question Follow asked Oct 16, 2014 at 13:39 MaccathMaccath 3,96655 gold badges2929 silver badges4343 bronze badges 1

• 6 You could probably just set the elements that aren't visible to be disabled ($form.find('input, textarea').not(':visible').prop('disabled', true);), which would save having to clone the form, remove elements, then replace it again. I'd be surprised if FormData included disabled input elements. – Anthony Grist Commented Oct 16, 2014 at 13:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

As @anthonyGist has pointed out in the ments, set invisible elements to disabled:

$(':hidden').prop('disabled', true);

The FormData has a delete method. So, you can just iterate through the hidden/disabled fields from the form you used to create the FormData and delete the ones you don't want in the object:

// $form is a jQuery object of the form in question
var formData = new FormData($form[0]);
form.find(':hidden').each(function(i, field) {
    var fname = $(field).attr('name');
    if(fname) {
        formData.delete(fname);
    }
});

本文标签： javascriptExcluding invisible form elements from FormData objectStack Overflow