Laravel: How To Print Ticket Using Laravel After Adding Data? - html

Question

Good day pips. I am struggling on printing after I click create.
the ui for creating and printing
When I click the create button, it will add to the database and print a number or ticket. All I know is dompdf but that one is downloading pdf
<div class="modal fade" id="callModal" tabindex="-1" role="dialog" aria-labelledby="callModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="callModalLabel">New Call</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<!--start of the form-->
<form id="form-data" class="form-horizontal" method="POST" action="{{ route('call.store') }}">
{{ csrf_field() }}
<div class="row form-group">
<div class="col-md-12">
<input type="hidden" class="form-control" id="trans-id" name="trans_id" readonly>
</div>
<div class="col-md-12">
<label>Transaction Type:</label>
<input type="text" class="form-control" id="trans-name" readonly>
</div>
<div class="col-md-12">
<input type="hidden" id="called" name="called" value="NO">
</div>
<div class="col-md-12">
<label>Department:</label>
<select class="form-control" id="dept_id" name="dept_id" required>
<option value="" data-hidden="true"
selected="selected">-- Select Department --
</option>
#foreach($departments as $department)
<option value= "{{ $department->id }}">
{{ $department->dept_name }}
</option>
#endforeach
</select>
</div>
<div class="col-md-12">
<label>RFID</label>
<input type="text" id="rfid" class="form-control" name="rfid" required>
</div>
<div class="col-md-12">
<label>Student First Name</label>
<input type="text" id="firstname" class="form-control" name="firstname" required="">
</div>
<div class="col-md-12">
<label>Student Last Name</label>
<input type="text" id="lastname" class="form-control" name="lastname" required>
</div>
<div class="col-md-12">
<label>Amount</label>
<input type="number" id="amount" class="form-control" name="amount" step=".01" required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-fill pull-right" id="form-button-add" name="form-button-add" onclick="window.print()">
CREATE <!--CREATE, SAVE AND PRINT THE TICKET-->
</button>
<button data-dismiss="modal" aria-hidden="true" class="btn btn-basic pull-right" style="margin-right: 2%">
CANCEL
</button>
<div class="clearfix"></div>
</form>
<!-- end of the form -->
</div>
</div>
</div>
</div>
I already code the javascript onclick in my create button. My problem is it prints the current page of the ui. I just want to print the details such as C-1, counter 1. Another problem is that is show the preview but it doesn't add on the database.