How to get value from Ajax back into the controller? - ajax

Question

I am trying to pass in a value from a form into the controller.
my blade
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
I am trying to get the value of EndDate :
function giveDate() {
let Date = $('#EndDate').val();
$.ajax({
url: 'example/end',
type: 'POST',
data: {
'Date': Date,
},
success: function (response) {
console.log(Date)
},
error: function () {
alert('An error occurred');
},
});
}
window.giveDate = giveDate
And in my controller I have this function public function
$EndDate = $request->input('EndDate');
$end = ClientMedicationRecurrence::end(
$id,
$EndDate
);
I however keep getting back the error of
Argument 2 passed to App\Example::end() must be an
instance of DateTime, null given, called in
How do I get the value of EndDate back into the controller ?

Answer 1

Date is actually a reserved JavaScript keyword so avoid using it. In your ajax call do like this:
let get_date = $('#EndDate').val();
$.ajax({
url: 'example/end',
type: 'POST',
data: {
'EndDate': get_date,
},
success: function (response) {
console.log(Date)
},
error: function () {
alert('An error occurred');
},
headers: {
// Add The CSRF Token to the Ajax header.
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
});
Also, notice that I have changed the name of the data being passed as "EndDate", so that you can access it in your controller.
You have also forgotten to submit CSRF token as well which is not the Laravel way of form submission. So, I have added it in the Ajax header.

Answer 2

I found solution that does not require AJAX or jquery
I needed to place the input under the #method('PUT') that was already in my blade
so this:
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
becomes this :
<div class="modal fade" id="endModals{{ $example->ID }}" tabindex="-1" role="dialog" aria-labelledby="endModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to End this Task?
Please Select a day to End this Task.
</p>
</div>
{{ Form::model($example, ['route' => [‘example.end', $example->ID ?? 0], 'method' => 'PUT']) }}
#method('PUT')
<input type="date" id="EndDate" name="EndDate" title="Date" class="form-control" required
value="{{ isset($searchParams['EndDate']) ? $searchParams['EndDate'] : Carbon\Carbon::now() }}"
>
<div class="modal-footer">
<button type="button" onclick="end()" class="btn btn-primary">End</button>
{{ Form::submit('End', ['class' => 'btn btn-danger']) }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
my controller function then just needed a slight tweak
$EndDate = $request->input('EndDate');
$end = ClientMedicationRecurrence::end(
$id,
$EndDate
);