1

I have a form that has both text and file fields. I am trying to submit the whole thing to a php script hosted on the server, and return a validation message. My form looks like this:

    <form id="ambassador" method="post" enctype="multipart/form-data">
        <label for="name">Name: </label>
        <input type="text" id="name"> <br />
        <label for="age">Age: </label>
        <input type="number" id="age"> <br />
        <label for="igram">Instagram Account: </label>
        <input type="text" id="igram"> <br />
        <label for="photo">Photograph Upload: </label>
        <input type="file" id="photo"><br />
        <label for="why">Why should you represent Drip Cold Pressed Juice?</label>
        <textarea id="why" width="300px"></textarea>
        <button type="submit" class="btn">Apply!</button>
    </form>

And my jQuery looks like:

jQuery("#ambassador").submit(function(event) {
    event.preventDefault
    var server = "http://getdripped.com/dev/ambassador.php";

    var form = document.getElementById('#ambassador');
    var formData = new FormData(form);

    alert(formData);


    jQuery.ajax({
        url: server,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;  
});

The php contains just a print_r statement for the $_FILES array and another for the $_POST array. However both returned arrays are empty.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Nick Winner
  • 261
  • 2
  • 11

3 Answers3

1

You have two problems.

Failing to pass a form to the FormData object

document.getElementById('#ambassador');

The getElementById method takes an id but you are passing it a selector. You need to remove the #. Currently you are passing null to new FormData (because there is no matching element so gEBId returns null).

There is no successful data in the form

<input type="number" id="age">

Form controls can only be successful if they have a name attribute and none of yours do.

Once you correct the ID, you populate the form data object with all the successful controls in the form: but there aren't any.

You need to add a name attribute to each of your inputs.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • you're a beautiful human! I should have caught those errors, I guess staring at the same code really fries your brain! Thank you! – Nick Winner Jul 17 '15 at 04:23
0

I would use an iframe as the target of the form.

   <form id="ambassador" method="post" enctype="multipart/form-data" target="form_iframe" >

    <iframe name="form_iframe" id="form_iframe" ></iframe>

See also How to make Asynchronous(AJAX) File Upload using iframe?

Community
  • 1
  • 1
ArtisticPhoenix
  • 21,464
  • 2
  • 24
  • 38
  • Thank you for your quick response! Could you elaborate a little bit? I'm not really familiar with using an iFrame in this approach. – Nick Winner Jul 16 '15 at 16:19
  • You just set is as the target of the form, and you can hide the iframe or show it because any output from your script that process the form will show in the iframe, think of an iframe like another page or a like I do a wormhole, as in sci-fi – ArtisticPhoenix Jul 16 '15 at 16:21
0

Ignore the downvote, and

Set async to true!

You set the async to false. This means that your success callback won't wait for the reply and finishes therefor long before PHP answers.

Also look at this SO Question as there is an answer already if you get into more trouble.

From the jQuery Documentation:

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Quentin was right about the serialize, I deleted the serialize option after further reading.

Community
  • 1
  • 1
hogan
  • 1,434
  • 1
  • 15
  • 32
  • The whole point of using a **callback** is that it won't be called until the response arrives, what's more setting async to false will cause the script to block everything until the response is recieved. Using `serialize` won't include the files, which makes it pretty pointless. – Quentin Jul 16 '15 at 23:16
  • @Quentin if you did the downvote, read better first I wrote "set it to true". Even in fat letters. I would appreciate a comment first. – hogan Jul 16 '15 at 23:34
  • Setting it to true, while best practise, won't help with the problem at all. Your explanation as to why it should be set to true is still completely backwards. – Quentin Jul 16 '15 at 23:34
  • @Quentin: Depends on how he checks the response. If he waits for the response, there could be no alert show up because the whole function is done already and the callback won't fire anymore. Let us get there bit by bit. – hogan Jul 16 '15 at 23:39
  • The code is in the question! We can see how he checks the response. He uses a callback on `success`, which will fire when the response gets back. – Quentin Jul 16 '15 at 23:41
  • The only time you get the situation you describe is when `async` is `true` (instead of `false` as it in the question) **and** the data is read with code *after* the `jQuery.ajax` call (instead of with `success` as it is in the question). – Quentin Jul 16 '15 at 23:42
  • Thanks for your answer Hogan! I did end up setting async to true (when I googled the problem earlier one of the pages I found told me to set it to false) – Nick Winner Jul 17 '15 at 04:24