Ajax response in not working properly in laravel 7 - php

Question

I am doing a simple insert in laravel 7 using ajax, here the validation is working properly but the success result is not working or showing propoerly.
The routes are
// Product Poutes
Route::get('create/product', 'Product\ProductController#create')->name('createProduct');
Route::post('store/product', 'Product\ProductController#store')->name('storeProduct');
The Model is
<?php
namespace App\Model;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
//
protected $fillable = [
'name', 'category_id','sell_price','purchase_price',
];
}
The Controller code
public function store(Request $request)
{
$validation = Validator::make(
$request->all(),
[
'name' => 'required|unique:products|max:120|min:4',
'category_id' => 'required',
'sell_price' => 'required',
'purchase_price' => 'required'
]
);
if ($validation) {
return response()->json(['error' => $validation->errors()->all()]);
}
$product = new Product;
$product->name = $request->name;
$product->category_id = $request->category_id;
$product->sell_price = $request->sell_price;
$product->purchase_price = $request->purchase_price;
$product->save();
return response()->json(['success' => "New Product Added!"]);
}
The Blade form
#extends('layouts.newApp')
<!-- Product create -->
#section('content')
<!-- Begin Page Content -->
<div class="container">
<!-- Page Heading -->
<h1 class="h3 mb-4 text-gray-800">Create Product</h1>
<div class="row">
<form method="POST">
#csrf
<div class="row justify-content-center">
<div class="form-group col-md-10">
<div id="div-error" class="col-md-10 justify-content-center">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
</div>
</div>
<div class="form-group col-md-10">
<label for="category">Category</label>
<select id="category_id" class="form-control custom-select" name='category_id'>
<option selected>Choose...</option>
#foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-10">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Product Name" name='name'>
</div>
<div class="form-group col-md-5">
<label for="sell_price">Notes</label>
<input type="number" class="form-control" id="sell_price" placeholder="sell_price"
name='sell_price'>
</div>
<div class="form-group col-md-5">
<label for="purchase_price">Notes</label>
<input type="number" class="form-control" id="purchase_price" placeholder="purchase_price"
name='purchase_price'>
</div>
<div class="form-group col-md-10">
<button class="btn btn-primary btn-submit" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$(".btn-submit").click(function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
}
});
var category_id = document.getElementById("category_id").value;
var name = $("input[name=name]").val();
var sell_price = $("input[name=sell_price]").val();
var purchase_price = $("input[name=purchase_price]").val();
$.ajax({
type: 'POST',
url: "{{ route('storeProduct') }}",
dataType: 'json',
data: {
category_id: category_id,
name: name,
sell_price: sell_price,
purchase_price: purchase_price
},
success: function(data) {
if ($.isEmptyObject(data.error)) {
alert(data.success);
} else {
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg(msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display', 'block');
$.each(msg, function(key, value) {
$(".print-error-msg").find("ul").append('<li>' + value + '</li>');
});
}
});
</script>
#endsection
The validation is working fine:
But after I add data and press submit it returns undefined type:
I tried all sort of possible method found non.
Hope to sort out the problem very soon.

Answer 1

may be you are getting some error in your response.why dont you check your ajax hit in inspect element to see what its returning i think its returning some php error or something else or you data in json maybe