The POST method is not supported for route admin/bill. Supported methods: GET, HEAD

Question

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.

Answer 1

In the form tag please add the action in the following manner

<form  method="post" action="javascript:void(0)"  id="addProduct">

and one more thing Please modify the line jQuery(this).serialize() to jQuery('#addProduct').serialize. as we are not getting the value from the button. if it will not work then add a button type="submit".

Answer 2

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:

jQuery('#add').on('click', function(e) {
    e.preventDefault();
    var formData = jQuery('#addProduct').serialize();
    $.ajax({
        url: "{{ route('admin.bill.add') }}",
        type: "post",
        data: formData,
        success: function(response){                                    
            console.log(response);
        }
    });
});