使用AJAX发布表单数据并使用一个提交触发PHPExcel操作

Question

I have a form where the submit posts data via AJAX and then refreshes a div without reloading the complete page. So far ok and it works perfectly.

My problem: I need to add a second action to this form. Same values but different action. Both actions work perfectly alone, but I just can't get them working within the same submit.

The second action is a script generating an xls with PHPExcel and triggering a download.

How do I include the following process_xls.php into the AJAX so it's triggered with the same submit?

The process_xls.php

$year = $_POST['year'];
$nmbr = $_POST['nmbr'];
$code = $_POST['code'];

include("excel/PHPExcel.php");

$objPHPExcel = new PHPExcel();

// ....
// code creating xls here
// ....

header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="Summary.xlsx"');
header('Cache-Control: max-age=0');

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save('php://output');
exit;

The HTML:

<div id="container">
 <form id="form_year" method="post">
 <input type="hidden" name="year" value="2015">
 <input type="hidden" name="nmbr" value="22">
 <input type="hidden" name="code" value="5Tvfr5T">
 <div class="button-small"><input type="submit" name="" value=""></div>
 </form>

 // ....
 // some data displayed here
 // ....

</div>

(the class "button-small" is only for CSS)

The Javascript

<script type="text/javascript">
$(document).ready(function()
{
 $(document).on('submit', '#form_year', function()
 {      
  var data = $(this).serialize(); 

  $.ajax({  
  type : 'POST',
  url  : 'process_year_data.php',
  data : data,
  success :  function(data)
   {
    $("#form_year").fadeOut(500).hide(function()
    {
     $("#container").fadeIn(500).show(function()
     {
     $("#container").html(data);
     });
    });
   }
  });
  return false;
 });


});
</script>

Any help greatly appreciated !

Answer 1

I think to start with it would be better practice to target just that single form rather than looking into the document and targeting that again.

By moving the return false into an if statement we ensure that the default method of the form isn't prevented. There is a bit of reading about event preventing here

$(document).ready(function(){
    var posted = false;
    $('#form_year').submit(function(){
        if (!posted) {
            var data = $(this).serialize();
            $.post('process_year_data.php', data, function(data){
                $("#form_year").fadeOut(500).hide(function(){
                    $("#container").fadeIn(500).show(function(){
                        $("#container").html(data);
                    });
                });
            });
            posted = true;
            return false;
        }
    });
});

I have also created a JSFiddle if you use the developer tools you should see a 404 network request and then a failed redirect that hits the action.