HTML + JQuery: Empty form values

Question

I'm trying to send the form data + additional parameter "id" to the server (Python, Google App Engine).

My form:

 <form method="post" action="/" id="form1" runat="server" enctype='multipart/form-data'>
       <div class="fileButtons">
       <input type='file' id="imgInp" name="imgInp" accept="image/*"/>
        <input type="submit" id="submit" name="action" value="Send"/>
        <input type='button' id='remove' name="remove" value="Remove" />
        </div>
    </form>

Javascript function:

$( '#form1' ).submit(function( event ) {
  event.preventDefault();

  var data = $(this).serializeArray();
  data.push({name: 'id', value: id});

  $.ajax({
    type: 'POST',
    url: '/set_image',
    data: data,
    dataType: 'json',
    success: function( resp ) {
      console.log( resp );
    }
  });
});

data only receives the id.

When debugging it with Firebug: I get the following:

this form#form1

  imgInp input#imgInp property value = "2.jpg" attribute value = "null"

  remove input#remove attribute value = "Remove"

If you have a look here api.jquery.com/serializeArray you will find that file inputs are not serialized. — makmonty
– makmonty, Commented Sep 11, 2013 at 10:59
I saw that use in here stackoverflow.com/a/6627996/2653179. If it can't be done this way, how do I add the additional data to the form and send it all in a POST request? — user2653179
– user2653179, Commented Sep 11, 2013 at 11:59
You might want to have a look to FormData object. With it, you can send files and other stuff via an AJAX call. Here some examples: developer.mozilla.org/en-US/docs/Web/Guide/… — makmonty
– makmonty, Commented Sep 11, 2013 at 16:04

dhruvin · Accepted Answer · 2013-09-11 10:39:01Z

1

may be you are attempting it wrong when you try to push the values in the data array.

Instead of writing var data = $(this).serializeArray(); data.push({name: 'id', value: id});

just try this

var data = $(this).serializeArray(); data.push({id : $("#imgInp").val});

answered Sep 11, 2013 at 10:39

dhruvin

8271 gold badge7 silver badges11 bronze badges

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

2 Comments

user2653179 Over a year ago

But the id isn't part of the form. It's a global parameter. I still get [] after serializeArray().

dhruvin Over a year ago

in that case, answer below from @dlebech is accurate to your problem. But submitting a file input parameter will not work on IE9 and older version of IE browsers.

Community · Accepted Answer · 2017-05-23 12:20:19Z

1

Try serializing your array like this instead:

var data = new FormData($(this)[0]);

For more information see this answer and notice that it will not work in older versions of Internet Explorer. If you need cross-browser compatibility, your cannot submit files through ajax.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Sep 11, 2013 at 14:41

dlebech

1,83914 silver badges29 bronze badges

Collectives™ on Stack Overflow

HTML + JQuery: Empty form values

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related