Two submit buttons with same action and one from them with added function/action for the same form

Question

I have one form with two submit buttons.

<form id="manageSalesForm" name="manageSalesForm" method="post" action="<?php echo BASE_URL?>includes/functions/sales_functions.php">

PROCEED button should submit data to the database (This works)

<input type="submit" name="btnProceed" id="btnProceed" value="PROCEED" onclick="document.getElementById('txtSubTotal').value = '';"/>

PRINT & PROCEED button should submit data to the database and print the page (How to do this?)

<input type="submit" name="btnPrintReceipt" id="btnPrintReceipt" value="PRINT &amp; PROCEED" formaction="<?php echo BASE_URL?>reports/salesreceipt2.php" formtarget="_blank"/>

salesreceipt2.php has the fpdf code and should open this in a new tab/window.

Same form has another button with button type

<button type="button" name="btnSave" id="btnSave" onclick="submitdata(); resetform();">ADD</button>

function submitdata() {
              var listItemName  = document.getElementById("listItemName").value;
              var listStock = document.getElementById("listStock").value;
              var txtUnitPrice = document.getElementById("txtUnitPrice").value;
              var txtQuantity = document.getElementById("txtQuantity").value;
              var listCustomer = document.getElementById("listCustomer").value;
              var txtReceiptNo = document.getElementById("txtReceiptNo").value;
              var TheDate = document.getElementById("TheDate").value;

              // Returns successful data submission message when the entered information is stored in database.
              var dataString = {listItemName:listItemName, listStock: listStock, txtUnitPrice: txtUnitPrice, txtQuantity: txtQuantity, listCustomer: listCustomer, txtReceiptNo: txtReceiptNo};
              if (listItemName == '' || listStock == ''|| txtUnitPrice == ''|| txtQuantity == ''|| listCustomer == ''|| txtReceiptNo == ''|| TheDate == '') {
              salesitemsAddFail();
              } 
              else {
                         // AJAX code to submit form.
                         $.ajax({
                         type: "POST",
                         url: "/pms/includes/functions/sales_temp_functions.php",
                         data: dataString,
                         cache: false,
                         success: function(html) {    

              //reload the sales datagrid once add the item details to temporary table (sales_temp)
              $('#list').trigger("reloadGrid",[{page:1}]);
                 //window.location.reload();
                 //refresh/update the sub total value when adding
                 $("#sub_total_div").load(location.href + " #sub_total_div");

                         }
                         });
                     }
         }

I tried several ways, but I couldn't make this work. Appreciate your help.

Answer 1

First of all change all of your submits to button. Like this :

<input type="button" value="Proceed" onclick="proceed(false)" />
<input type="button" value="Proceed & Print" onclick="proceed(true)" />

Now add this Javascript :

function print(recordId){
    window.open( 'baseurl/salesreceipt2.php?id='+recordId , '_blank');
}
function proceed(printIt){
    // your ajax operations..
    $.ajax({
        //your ajax configs..
        success:function(response){
            //your ajax success things..
            if(printIt == true){
                print(response.lastId); // Pass last Id of record to print function if your salesreceipt2.php always prints last record that's unnecessary.
            }
        }
    });
}

It works easy. If printIt ( your first parameter ) is true it calls print with LastRecordId ( if your salesreceipt2.php always prints last record passing it is unnecessary as i said. ) if not you should return a JSON Response that contains inserted ID. So this inserted id will be passed to salesreceipt2.php file by ?id