Ajax and Laravel 500 (Internal server error) - php

Question

I am trying to make a crud small application to learn ajax, but I am facing serious problems here.
Here are some snippets, when I click on submit, the form doesn't do anything, just show me error 500 in chrome's console.And if I try to show something in success ajax function the request it's showing "undefined".
Thank you so much!
Here is my controller
public function store(Request $request)
{
$response = array(
'msg' => 'Thank you nephew'
);
$request->validate([
'name' => 'required|min:3',
'mobile' => 'required',
'address' => 'nullable',
'email' => 'nullable'
]);
$values = $request->all();
echo $values;
return Response::json($response);
}
Here is my Ajax script
<script>
$('#create-form').on('submit', function (event) {
event.preventDefault();
let name = $("input[name=name]").val();
let mobile = $("input[name=mobile]").val();
let email = $("input[name=email]").val();
let address = $("input[name=address]").val();
console.log(name);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
});
$.ajax({
type: 'POST',
url: '{{ route('addresses.store') }}',
data: {name: name, mobile: mobile, email: email, address: address, token: $('input[name="_token"]').val()},
success: function (data) {
console.log(data);
}
});
});
</script>
Here is the blade modal
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create address</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="result"></div>
<form action="{{ route('addresses.store') }}" method="post" id="create-form">
#csrf
<div class="form-group">
<label for="">Name</label>
<input type="text" class="sequence-input" name="name"/>
</div>
<div class="form-group">
<label for="#">Mobile</label>
<input type="text" class="sequence-input" name="mobile"/>
</div>
<div class="form-group">
<label for="#">Address</label>
<textarea name="address" class="sequence-input" cols="30" rows="6"></textarea>
</div>
<div class="form-group">
<label for="#">Email Address</label>
<input type="text" class="sequence-input" name="email"/>
</div>
<div class="form-group">
<button type="submit" id="create" class="sequence-btn sequence-btn--primary">Create</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="sequence-btn sequence-btn--danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

Try using single quotes on the name's value let mobile = $("input[name='mobile']").val(); and so on
Or
$.ajax({
type: 'POST',
url: '{{ route('addresses.store') }}',
data: $(this).serialize(),
success: function (data) {
console.log(data);
}
});

Answer 2

Your 500 error is caused by attempting to echo the array $values:
$values = $request->all();
echo $values; // <-- Your error is here.
Try using the dd helper method instead: dd($values)