find and solve || findandsolve.com
Please wait.....

Welcome back.






Before Read Terms of use

Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

When I have create function as given below

var post = function (formId) {
     var formdata = new FormData($(formId).get(0));
    $.ajax({
        url: "/myController/myAction",
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        success: function (result) {
         alert(result);
        },
        error: function (result) {
            alert(result);
        }
    });
}


In my HTML page as given below

                 <form id="postId">
                    <h2>Post Example by ajax</h2>
                    <hr />
                    <div class="col-sm-12 row form-group">
                     <div class="col-sm-8">
                      <input type="text" id="txt_post_demo"/>
               </div>
              <div class="col-sm-4">
                   <input type="button" value="Save" class="btn-width btn btn-success" id="btn_save_post"
                    onclick="post('postId')" />
               </div>
              </div>
          </form>

When I have clicked on "Save" button than Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement' has been occured.


Answer


Only I have changed my second line code

var formdata = new FormData($(formId).get(0)); 

To

var formdata = new FormData(document.getElementById(formId));

Finally i have solved this types of issue.This final code as given below.

var post = function (formId) {
  //I have changed only this code.
var formdata = new FormData(document.getElementById(formId));
    $.ajax({
        url: "/myController/myAction",
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        success: function (result) {
         alert(result);
        },
        error: function (result) {
            alert(result);
        }
    });
}


In Multiple images and multiple values case: I have solved as given below function.

 var post = function (formId) {
   var formdata = new FormData($(formId).get(0));
    //each upload images add in fromdata by forloop
    var files = document.getElementById('file').files;// $('#file').files[0];// e.target.files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            // var formdata = new FormData();
            for (var x = 0; x < files.length; x++) {
                //formdata.append("file" + x, files[x]);
                formdata.append("file" + 0, files[0]);
            }
        }
 }
    $.ajax({
        url: "/myController/myAction",
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        success: function (result) {
           //after successfully your code here
        },
        error: function (result) {
       //requesting failed case here
        }
    });
  }


Mahira  khanna

Mahira khanna

I have the skills you need for you company blog, website, or other content materials

1 Comments


Avatar for adoum   mahamat madout
adoum mahamat madout

thank you so much Mahira Khanna.


Report Response