Ja bym na Twoim miejscu zmienił koncepcję. W JavaScript istnieje coś takiego jak FormData i Ajax. Nie musisz tworzyć ukrytego formularza i pół po to, żeby coś wysłac.
Jedyna róznica jest taka, że Twój skrypt PHP(czy tam jakiś inny) musisz zwrocić link pod którym będzie można plik pobrać. Czyli dzielisz obecny skrypt na dwa:
-
downloadUrl
powinien zawierać logikę, która wygeneruje Ci plik csv/excel/inny i zapisze go na dysku
// pseudo kod, dla pliku generateFile.php
// patrze co przyszło z requesta
// generuje plik pdf/csv...
// zapisuje plik na dysku
// zwracam link echo download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf, a nie sam plik
- window.location = download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf
// pseudo kod, dla pliku downloadFile.php
$data = file_get_contents("mojplik_2017_03_23_23f23n82d238yf23ne.pdff");
header("Content-type: application/octet-stream");
header("Content-disposition: attachment;filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf");
echo $data;
U Ciebie obecnie wszystko się chyba dzieje za jednym razem. Wysyłasz formularz pod jakiś url i tam się generule plik + wysyła się od razu do przeglądarki, żeby zadziałał poniższy sposób, to trzeba to podzielić tak jak wyżej napisałem.
$('.download-file').click(function (e) {
// Dwie pierwsze linijki zapakuja nam wszystkie dane z forma do zmiennej formData,
// czyli stanie się dokładnie to samo, co po zrobieniu tego:
// $('#search_form *').filter(':input').each(function () {
// var name = $(this).attr("id");
// var val = $(this).val();
// if (typeof name != 'undefined') {
// form.append('<input type="text" name="' + name + '" value="' + val + '">');
// }
// });
var form = $('#search_form')[0], // [0], zeby uzyskać obiekt JavaScript'owy, a nie jQueryowy
formData = new FormData(form),
downloadUrl = url + '/' + ajax_url,
type = $(this).attr('data-type'),
file_name = $(this).attr('file-name');
// to nam zastępuje
// form.append('<input type="text" name="download" value="' + type + '">');
// form.append('<input type="text" name="file_name" value="' + file_name + '">');
formData.append('download', type);
formData.append('file_name', file_name);
// extra message for excel and CSV
if (type !== 'pdf' && type !== 'print') {
displayMessage('info', 'File is being generated. This might take a while ...');
}
// to zastępuje form.appendTo('body').submit();
// Twój submit na formularzu wykona GET request
// (domyslnie jest to GET, bo nie sprecyzowałeś <form method="POST lub GET"></form>)
// więc można to zastąpić czymś takim
$.ajax({
url: downloadUrl,
data: formData,
beforeSend: function () {
// request się zaraz rozpocznie
// więc możesz zmienić tekst na Prosze czekać...
},
success: function (data) {
// request się wykonał,
// możesz zmienić tekst guzika
// ta linijka spowoduje faktyczny download pliku
// zakładam, że data.url = download.php?filename=mojplik_2017_03_23_23f23n82d238yf23ne.pdf
window.location = data.url;
},
error: function (jqXHR) {
// coś nie tak...
// jakiś komunikat o błędzie?
}
});
});