FormData Object not submitting via jQuery AJAX call

Question

I'm using this script to get all values from a form, in order to prepare it for an ajax request:

function saveDataAjax(){
    var fd = new FormData();
    var inputs = document.getElementsByTagName('input');
    for(i=0;i<inputs.length;i++) {
        fd.append(inputs[i].name, inputs[i].value);
    }
    $.ajax({
        url: '/edit.php',
        data: fd,
        type: 'POST',
        dataType: 'html',
        success: function(data){
            alert(data);
        }
    });
}

However I'm getting a Type error from jQuery, and if I alert fd['inputname'] I get undefined, so I guess I must be doing something wrong somewhere...

Firefox debuggers tells me this: NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object @ http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2

Mind posting the code for FormData? If you're getting an undefined there, chances are that thats where things are going wrong. — Eudis Duran
– Eudis Duran, Commented Dec 10, 2012 at 21:06

KingKongFrog · Accepted Answer · 2012-12-10 21:06:45Z

3

Add the following to the AJAX call:

 processData: false,
 contentType: false,

So it looks like:

  $.ajax({
       url: '/edit.php',
       data: fd,
       type: 'POST',
       processData: false,  //Add this
       contentType: false, //Add this
       dataType: 'html',              
       success: function(data){
           alert(data);
       }
   });

answered Dec 10, 2012 at 21:06

KingKongFrog

14.5k22 gold badges78 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

don Over a year ago

That made the script work, but I've tried to figure out why (to understand how it works) and didn't really come to a conclusion.. What do processData and contentType would do if left b default (true)? Anyway, thank's a lot!

Eudis Duran · Accepted Answer · 2012-12-10 21:05:49Z

0

This is probably not the reason, but just wanted to point it out: i is global here. The idea in JS is towards global abatement. Should probably be var i=...

answered Dec 10, 2012 at 21:05

Eudis Duran

7804 silver badges16 bronze badges

1 Comment

nDijax Over a year ago

I agree and you can use the formdata constructor like this new FormData(yourform);

Kalpesh Desai · Accepted Answer · 2016-11-23 07:58:29Z

this page help you ...:)

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  </script>
</head>
<body>
  <form method="post" id="fileinfo" enctype="multipart/form-data">
    file <input type="file" name="slug"><br>
     <input type="button" id="uploadBTN" value="Stash the file!"></input>
  </form>
  <script type="text/javascript">
    $(document).ready(function()
    {
      $('#uploadBTN').on('click', function()
      { 
          var form = $('form').get(0); 
          console.log(form);
          var fd = new FormData(form);
          fd.append('user_id',4);
          fd.append('user_media_category_id',1);
          //console.log(fd);
          fd.append("user_", "This is some extra data");
          $.ajax({
              url: 'http://localhost/yii2/azstudio/project/api/web/v1/user-media/new',  
              type: 'POST',
              data: fd,
              success:function(data){
                  console.log(data);
              },
              error:function(data){
                console.log(data);
              },
              cache: false,
              contentType: false,
              processData: false
          });
      });
    });
  </script>
</body>
</html>

Collectives™ on Stack Overflow

FormData Object not submitting via jQuery AJAX call

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related