FormData constructor function of JavaScript

If we want to handle the form data of a form, we can use the FormData constructor function. For this, we have to create a formData object from the FormData constructor function.

const productForm = new FormData(event.currentTarget);

To get the single value of a form:

        
    const title = productForm.get("title");
    const image = productForm.get("image");

    console.log(title);
    Output: 'mozahedul islam';

    console.log(image);
    Output:
    File {
      name: 'dell.jpg',
      lastModified: 1681141987738,
      lastModifiedDate: new Date('2023-04-10T15:53:07.000Z'),
      webkitRelativePath: '',
      size: 263169,
      type: 'image/jpeg'
    }


To get the all value of a form:

    const productForm = new FormData(event.currentTarget);
    const allFormData = Object.fromEntries(productForm);
    console.log("ALL DATA ==> ", allFormData);
    
    Output:
    {
      title: 'mozahedul islam',
      image: File {
        name: 'dell.jpg',
        lastModified: 1681141987738,
        lastModifiedDate: new Date('2023-04-10T15:53:07.000Z'),
        webkitRelativePath: '',
        size: 263169,
        type: 'image/jpeg'
      }
    }


To get the all values of a form as an array of arrays:

   
    const productForm = new FormData(event.currentTarget);
    const arrayOfArray = [...productForm.entries()];
  
    Output:
    [
      [ 'title', 'mozahedul islam' ],
      [
        'image', File {
          name: 'dell.jpg',
          lastModified: 1681141987738,
          lastModifiedDate: new Date('2023-04-10T15:53:07.000Z'),
          webkitRelativePath: '',
          size: 263169,
          type: 'image/jpeg'
        }
      ]
    ]


To get the all values of a form as an array:

   
    const valueAsArray = [...productForm.values()];

    Output:
    [
      'Mozahedul Islam', File {
        name: 'dell.jpg',
        lastModified: 1681141987738,
        lastModifiedDate: new Date('2023-04-10T15:53:07.000Z'),
        webkitRelativePath: '',
        size: 263169,
        type: 'image/jpeg'
      }
    ]




Post a Comment

Previous Post Next Post