Post form data with AJAX and trigger PHPExcel action with one submit

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 !

Are you trying to change the URL of your AJAX call or are you trying to change the action of the form? If you are trying to hit `process_xls.php` the ajax url needs to be changed to that wont it? — James McClelland, Oct 23 '15 at 14:09
I actually want the same form to submit to two different actions: to url `process_year_data.php` with AJAX and after that to url `process_xls.php` as a simple post action (without AJAX). Is that possible at all to combine this in one form ? — chrimens, Oct 23 '15 at 16:55

score 0 · Accepted Answer · answered Oct 23 '15 at 23:51

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.

This is pointing me the way to go. I'll just need to figure out, how to post the same data additionally to the other php. Thanks for your help! — chrimens, Oct 24 '15 at 10:04
When you do the normal post after the first post it should send the same parameters that are in your form :) — James McClelland, Oct 24 '15 at 11:52
Adding the second post didn't work. Until I found out that the problem wasn't the function itself but the `header(...)` code and the `exit` at the end of the target php (needed to force a download). Instead of adding a second post, I added an `onclick` to the form which simply opens the php as a link and passing on the form values by `get`. @JammyDodger Thanks again for getting me on the right track. Probably saved me hours! — chrimens, Oct 26 '15 at 15:58

Post form data with AJAX and trigger PHPExcel action with one submit

1 Answers1