In Laravel i use ajax for adding and fetching data from MySQL Database through blade template, i have add form summation on onsubmit event. Please Help me.
My codes are.
Route.php
Route::get('admin/bill',[BillingController::class, 'bill'])->name('billing');
Route::post('admin/billing/add',[BillingController::class, 'billadd'])->name('admin.bill.add');
Controller.php
public function billadd(Request $request){
$request->validate([
'customer_name'=>'required',
'mobile_number'=>'required',
'current_date'=>'required',
'current_time'=>'required',
'bill_number'=>'required',
'product_name'=>'required',
'batch_number'=>'required',
'variant'=>'required',
'price'=>'required',
'quantity'=>'required',
'tax_percent'=>'required',
]);
$posBill = new PosBilling();
$posBill->customer_name=$request->customer_name;
$posBill->customer_phone=$request->mobile_number;
$posBill->billing_date=$request->current_date;
$posBill->billing_time=$request->current_time;
$posBill->bill_number=$request->bill_number;
$posBill->product_name=$request->product_name;
$posBill->batch_number=$request->batch_number;
$posBill->variant = $request->variant;
$unitPrice = $posBill->price = $request->price; // One product price
$totalQuantity = $posBill->quantity = $request->quantity; // Total quantity of product
$totalAmount = $posBill->quantity_value = $unitPrice * $totalQuantity; // Total amount of product
// Discount Calculation
$discountPercent = $posBill->discount_percent = $request->discount_percent; // Discount percent
$discountPrice= $posBill->discount_amt = ($totalAmount) * ($discountPercent / 100); // Discount amount
$amountWithDiscount= $posBill->amount_with_discount = $totalAmount - $discountPrice; // with Discount amount of products
// Tax Calculation
$taxPercent= $posBill->tax_percent = $request->tax_percent; // Tax percent of product
$TaxPrice = $posBill->tax_amount = ($amountWithDiscount) * ($taxPercent / 100); // Amount of products tax
$CGST = $TaxPrice / 2; // CGST amount of products
$SGST = $TaxPrice / 2; // SGST amount of products
$amountWithTax = $posBill->net_amount = $TaxPrice + $amountWithDiscount; // with Tax amount of products
$i= 1;
if($i == 1){
$posBill->save();
$i++;
// echo $i;
}
if($i>1){
$billNumber = $request->bill_number;
$billingProduct = PosBilling::where('bill_number', $billNumber)->get();
}
return response()->json(['billingProduct'=>$billingProduct]);
}
blade.php
<form method="post" id="addProduct">
@csrf
<div class="row">
<div class="col-2">
<div class="form-group">
<label for="">Product Name <b>*</b></label>
<input type="text" class="form-control" name="product_name" id="product_name"
placeholder="Product Name">
</div>
</div>
<div class="col-2">
<div class="form-group">
<label for="">Batch Number <b>*</b></label>
<input type="text" class="form-control" name="batch_number" id="batch_number">
</div>
</div>
<div class="col-1">
<div class="form-group">
<label for="">Variant <b>*</b></label>
<select class="form-control" name="variant" id="variant">
<option value="" selected disabled>Variant</option>
@foreach ($variant as $item)
<option value="{{ $item->id }}">{{ $item->unit_name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-1">
<div class="form-group">
<label for="">Price <b>*</b></label>
<input type="number" class="form-control" name="price" id="price">
</div>
</div>
<div class="col-1">
<div class="form-group">
<label for="">Quantity <b>*</b></label>
<input type="number" class="form-control" name="quantity" id="quantity">
</div>
</div>
<div class="col-2">
<div class="form-group">
<label for="">Tax <b>*</b></label>
<select class="form-control" name="tax_percent" id="tax_percent">
<option value="" selected disabled>Tax</option>
<option value="0">0% GST</option>
<option value="5">5% GST</option>
<option value="12">12% GST</option>
<option value="18">18% GST</option>
<option value="28">28% GST</option>
</select>
</div>
</div>
<div class="col-2">
<div class="form-group">
<label for="">Discount[%]</label>
<input type="discount" class="form-control" name="discount_percent" id="discount_percent"
placeholder="Ex- 5, 10, 30, etc">
</div>
</div>
<div class="col-1">
<div class="form-group">
{{-- <button><a href="#" class="btn btn-success" id="add">Add</a></button> --}}
<button class="btn btn-success" id="add" >Add</button>
</div>
</div>
</div>
</form>
blade.php (ajax code)
<script>
jQuery('#add').onsubmit(function(e){
e.preventDefault();
alert("Test");
break;
var formData = jQuery(this).serialize();
$.ajax({
url: "{{ route('admin.bill.add') }}",
type: "post",
data: formData,
success: function(response){
console.log(response);
}
});
});
</script>
I’m trying to submit data without page loading and fetch data both using one controller function.
2
Answers
In the form tag please add the action in the following manner
and one more thing
Please modify the line
jQuery(this).serialize()tojQuery('#addProduct').serialize. as we are not getting the value from the button.if it will not work then add a button
type="submit".Your jQuery is quite broken, which results in the form being posted to the page you’re are on already; and due to your current route settings, you get the error that the route doesn’t support POST.
You should be able to get the JavaScript working by using the
on()function instead and targeting the right form element: