I’m using Ajax to pass my form data and files to a PHP file for processing.
Javascript:
$("form#applyform").submit(function(){ var data = new FormData(); jQuery.each($('#file')[0].files, function(i, file) { data.append('file-'+i, file); }); $.ajax({ url: 'ValidateApplication.php', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); }
ValidateApplication.php
definitely exists. I can view it if I type in the address into the web browser, however when I submit the form chrome console returns 404.
The PHP is in the same folder as the HTML page the JavaScript is running on so I am confused as to why I keep getting a 404.
UPDATE
Changing POST to GET gets rid of the 404 error, but returns a 500 Internal Server Error
UPDATE 2
Changing the action of the form to =”ValidateApplication.php” and submitting it as normal (without AJAX) leads to the correct file without any errors.
Advertisement
Answer
It seemed to be a problem with the FormData
object. Once I changed my method to use .serialize()
instead, the page worked just fine.
$("form#applyform").submit(function(){ var data = $("form#applyform").serialize(); jQuery.each($('#file')[0].files, function(i, file) { data.append('file-'+i, file); }); $.ajax({ url: 'ValidateApplication.php', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ alert(data); } }); }