I'm trying to submit a form using ajax and send it's data to the database, but I don't understand how to proces the data received from the ajax call.
I wrote the following code:
{% extends 'base.html.twig' %}
{% block title %}Assignments | CRM Fabriek{% endblock %}
{% block body %}
<div class=container>
<div class=columns>
<div class=column is-full>
<div class=level>
<h1 class=level-left title title-no-margin is-vcentered>Assignments</h1>
<div class=level-right>
{% include 'search.html.twig' %}
<a href={{ path(newAssignment) }} class=level-item button is-success>Add new</a>
</div>
</div>
<table class=table is-fullwidth>
<tr>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Actions</th>
</tr>
{% if assignments != null %}
{% for assignment in assignments %}
<tr>
<td>{{ assignment.name }}</td>
<td>{{ assignment.description }}</td>
<td>{{ assignment.status }}</td>
<td>
<a class=button is-info is-small href={{ path('overviewAssignment', {'id': assignment.id}) }}><i class=fa fa-eye></i></a>
<a class=button is-warning is-small href={{ path('editAssignment', {'id': assignment.id}) }}><i class=fa fa-pencil></i></a>
<button class=button is-success is-small onclick=openModal({{ assignment.id }})><i class=fa fa-plus></i></button>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan=4>No entries</td>
</tr>
{% endif %}
</table>
<div class=pagerfanta>
{{ pagerfanta(pager)}}
</div>
<div>
<div class=modal>
<div class=modal-background></div>
<div class=modal-card>
<header class=modal-card-head>
<p class=modal-card-title>Modal title</p>
</header>
<section class=modal-card-body>
{{ form_start(form, {'attr': {'id': 'task_form'}}) }}
{{ form_row(form.name, {'attr': {'class': 'input'}}) }}
{{ form_row(form.description, {'attr': {'class': 'textarea'}}) }}
{{ form_label(form.status) }}
<div class=control>
<div class=select>
{{ form_widget(form.status) }}
</div>
</div>
{{ form_end(form) }}
</section>
<footer class=modal-card-foot>
<button id=submit_task class=button is-success>Save changes</button>
<button class=button onclick=closeModal()>Cancel</button>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
function openModal(id){
$('.modal').addClass('is-active');
$('#submit_task').attr('onClick', 'submitTask('+ id +');');
}
function closeModal(){
$('.modal').removeClass('is-active');
}
function submitTask(id){
console.log(id);
form = $('#task_form').serialize();
console.log(form);
$.ajax({
url:'{{ path('submit_task') }}',
type: POST,
dataType: json,
data: {
task: form
},
async: true,
success: function (return_data)
{
console.log(return_data);
},
error: function (xhr, ajaxOptions, thrownError)
{
}
});
closeModal();
}
</script>
{% endblock %}
With the following method in the controller:
/**
* @Route(/, name=submit_task)
*/
public function add_task(Request $request){
$form_data = $request->get('task');
return new JsonResponse($form_data);
}
The form is created in the index action:
/**
* @Security(is_authenticated())
* @Route(/assignments, name=assignments)
*/
public function index(Request $request)
{
$assignment_rep = $this->getDoctrine()->getRepository(Assignment::class);
if($request->get('search') == null) {
if($this->get('security.authorization_checker')->isGranted('ROLE_ADMIN')){
$assignments = $assignment_rep->findAll();
}
else
{
/* @var User $user */
$user = $this->getUser();
$assignments = array();
foreach($user->getAssignments() as $assignment){
array_push($assignments, $assignment);
}
}
}
else{
if($this->get('security.authorization_checker')->isGranted('ROLE_ADMIN')){
$assignments = $assignment_rep->search($request->get('search'));
}
else
{
/* @var User $user */
$assignments = $assignment_rep->searchUser($request->get('search'), $this->getUser()->getId());
}
}
$page = $request->query->get('page', 1);
$adapter = new ArrayAdapter($assignments);
$pagerfanta = new Pagerfanta($adapter);
$pagerfanta->setMaxPerPage(25);
$pagerfanta->setCurrentPage($page);
$task = new Task();
$form = $this->createForm(TaskFormType::class, $task);
$form->remove('assignment');
$assignments = $pagerfanta->getCurrentPageResults();
return $this->render('assignment/index.html.twig', array(
'assignments' => $assignments,
'pager' => $pagerfanta,
'form' => $form->createView()
));
}
I would like to know how to process the form data without the form object in the function. Could anyone help me out with this problem!