I got one form with two submit button.
blade.php
<form method="GET" id = "uploadForm">
@csrf
<div class="form-group">
<button type="submit" value="Search" class="btn btn-info" id="search_btn" onclick="searchForm()">Search <i class="fa fa-search"></i></button>
<button type="submit" value="Export" class="btn btn-success float-right" id="export_btn" onclick="exportForm()">Export <i class="fa fa-download"></i></button>
</div>
</form>
js file
function searchForm() get data and display as datatable
{
let form = $('#uploadForm');
let table = $('.datatable');
form.attr('action', '/search').submit(function(e) {
e.preventDefault();
if ($.fn.DataTable.isDataTable(".datatable")) {
table.DataTable().clear().destroy();
}
table.DataTable({
processing: true,
serverSide: true,
bDestroy: true,
bJQueryUI: true,
ajax: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url : form.attr('action'),
type : form.attr('method'),
data : {
type: $("#type").val(),
from: $("#from").val(),
to : $("#to").val(),
},
},
columnDefs: [
{'data': 'trx_id', "targets": 0, title: "Trx ID"},
{'data': 'type', "targets": 1, title: "Type"},
{'data': 'sender_id', "targets": 2, title: "Sender ID"},
{'data': 'receiver_id', "targets": 3, title: "Receiver ID"},
{'data': 'amount', "targets": 4, title: "Amount"},
{'data': 'remark', "targets": 5, title: "Method"},
{'data': 'fee', "targets": 6, title: "Fees"},
{'data': 'afterFee', "targets": 7, title: "Amount After Fees"},
{'data': 'date', "targets": 8, title: "Date"},
],
error(){
alert("error");
}
});
// prevent submit multiple time
e.stopImmediatePropagation();
return false;
// prevent submit multiple time
});
}
function exportForm() //export data and download excel
{
$('#uploadForm').attr('action', '/export');
$('#uploadForm').attr('target', '_blank').submit();
}
Search_form and export_form both work fine. But it have problem when I call search_form then call export_form, it will always go into search_form and will not download excel. I have run out of idea how to solve this issues.
