Building FormData object from form

Question

My FormData object will not get data from my pages form element. The appended data goes through and is displayed when I do a var_dump($_POST) in the PHP file, however the form data is not there. Without the append, it is just an empty array.

Javascript:

$(function() {
    $("form").on("submit", function() {
        var formData = new FormData($("#form")[0]);
        formData.append("Hello world", "This is a test");
        $.ajax({
            url: "sub/addCrane.php",
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
        })
        .done(function(data) {
            $("#form").append(data);
        });
    });
});

HTML form:

<form id="form" enctype="multipart/form-data" action="#">

    <p class="inline">Crane Model: </p><input type="text" id="model"><br />
    <p class="inline">Crane Brand: </p><input type="text" id="brand"><br />
    <p class="inline">Crane type (ie. Crawler, Tower, Mobile): </p><input type="text" id="type"><br />
    <p class="inline">Image of crane: </p><input type="file" id="image">
    <input type="submit" id="submit">

</form>

Check your response console.log(data)' in done()`?

Brotheryura
– Brotheryura

2014-05-09 00:02:11 +00:00
Commented May 9, 2014 at 0:02 — Brotheryura
– Brotheryura, Commented May 9, 2014 at 0:02

Christopher Wirt · Accepted Answer · 2014-05-09 00:15:14Z

1

Your issue is that you're using id instead of name in your input tags, which doesn't let JQuery play nice with them, and so it ignores them. Also, it's not common practice, and PHP doesn't really like it either :)

Cheers!

edited May 9, 2014 at 0:15

answered May 9, 2014 at 0:03

Christopher Wirt

1,1341 gold badge10 silver badges22 bronze badges

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

5 Comments

LiggyRide Over a year ago

Will this send the file also?

LiggyRide Over a year ago

And sorry for the silly question, self teaching JQuery meant I missed a lot, but if my form is now <form name='myForm'> do I just call it in JQuery with $('myForm')?

Christopher Wirt Over a year ago

Ah, sorry, let me clarify. You need to use 'name' in the input tags, though using a name for the form is also beneficial. To answer that question, though, yes, that's the selector you'd use

LiggyRide Over a year ago

Thank you so much! First question on stackoverflow and it went so well!

Christopher Wirt Over a year ago

Come back more often, we're mostly really nice :D

Brotheryura · Accepted Answer · 2014-05-09 00:15:18Z

0

Try next:

$("#form").submit(function () {

var formData = new FormData();
jQuery.each($('#image')[0].files, function(i, file) {
    formData.append('file-'+i, file);
});

        $.ajax({
            type: "POST",
            url: 'sub/addCrane.php',
            data: formData,
            success: function (answer) {
                console.log(answer);
            }
        });
        return false;
    });

edited May 9, 2014 at 0:15

answered May 9, 2014 at 0:07

Brotheryura

1,18814 silver badges21 bronze badges

1 Comment

LiggyRide Over a year ago

formData is not defined in the example?

Collectives™ on Stack Overflow

Building FormData object from form

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related