PHP handle Ajax From Actions with Slim - php

Question

i got a question about php and ajax with the slim Framework
I created some routes that routes me to a controller now i want to submit a simple form with Ajax. This is working fine, but the problem is if i will submit the form without Ajax i send a post request the server this will call the createAction instead of the form renderAction method in my controller (see code).
But i need to call formRender because when the form not is valid i have to show the form with the values to the user again.
note: I'am not implemented any validation code yet.
Here my JS Code to submit the Form:
$('#reservation').on('submit', function (ev) {
ev.preventDefault();
var data = $(this).serialize();
var keyVal = data.split("&");
var values = [];
keyVal.forEach(function (element) {
values[element.split("=")[0]] = element.split("=")[1];
});
$.post("/admin/reservation/create", data).done(function (data) {
console.log(data);
}).error(function (err) {
});
});
and here the code of my controllers:
public function formRender(Request $request, Response $response)
{
$formData = $request->getParams();
return $this->view->render($response, '/reservations/form.twig', [
'formData' => $formData]);
}
public function createAction(Request $request, Response $response)
{
$formData = $request->getParams();
$response = $response->withJson($formData);
return $response;
}
here my routes:
$app->get('/reservation/create', 'ReservationController:formRender');
$app->post('/reservation/create', 'ReservationController:createAction');
here the view code (using twig):
<form class="col s6" id="reservation" method="post">
<div class="row">
<div class="input-field col s6">
<input placeholder="Titel" id="title" name="title" type="text" class="validate"
value="{{ formData.title }}">
<label for="title">Titel</label>
</div>
<div class="input-field col s12 m6">
<select class="icons" multiple>
<option value="" disabled selected>Choose Rooms</option>
<option value="" data-icon="images/sample-1.jpg" class="circle">example 1</option>
<option value="" data-icon="images/office.jpg" class="circle">example 2</option>
<option value="" data-icon="images/yuna.jpg" class="circle">example 1</option>
</select>
<label>Rooms</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input value="{{ formData.startDate }}" id="startDate" name="startDate" type="date" class="validate">
</div>
<div class="input-field col s6">
<input value="{{ formData.endDate }}" id="endDate" name="endDate" type="date" class="validate">
</div>
</div>
<button type="submit" class="waves-effect waves-light btn">button</button>
</form>
how should i solve this ... so i want to be able to send data per ajax, and i want to be able to submit my form without js. I'am looking for a clean solution .. not a quick and dirty fix with a hidden field or something...
whats best practice for such cases?

Answer 1

I suggest you solve it naming your routes:
$app->get('/reservation/create', 'ReservationController:formRender')->setName('reservationFormRenderer');
$app->post('/reservation/create', 'ReservationController:createAction')->setName('reservationFormAjaxProcessor');
Since you are using Twig as templating engine, use path_for method to inject the rotes to the form:
<form class="col s6" id="reservation" method="post" action="{{ path_for('reservationFormRenderer') }}" data-ajax-processor="{{ path_for('reservationFormAjaxProcessor') }}">
All that is left to do is to pick the dynamic route in your JS code:
$('#reservation').on('submit', function (ev) {
ev.preventDefault();
var data = $(this).serialize();
var keyVal = data.split("&");
var values = [];
keyVal.forEach(function (element) {
values[element.split("=")[0]] = element.split("=")[1];
});
// here we pass the value of data-ajax-processor attribute of the form
$.post(($this).data('ajax-processor'), data).done(function (data) {
console.log(data);
}).error(function (err) {
});
});
Now if the form is not submitted dynamically (i.e. AJAX-way), the URL of the processor will be in form's action attribute.
You could actually do this without naming your routes, but this manner will keep maintainability of your code, since you'll only have to change actual URLs in one place - that is in routes declarations.