Submit form using javascript - AJAX - symfony

Question

I have article entity, and I want to add one article via ajax.
I create a form:
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('name')
->add('descriptions');
}
This is my controller:
/**
* #Route("/admin/article/add", name="app_admin_add_article")
*/
public function addCustomer(Request $request)
{
$form = $this->createForm(ArticleFormType::class);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid())
{
/** #var Article $article */
$article = $form->getData();
$em = $this->getDoctrine()->getManager();
$em->persist($article);
$em->flush();
$this->addFlash('success', 'Article was successfully added!');
return $this->redirectToRoute('app_admin_articles');
}
return $this->render('admin/articles/create.html.twig', [
'articleForm' => $form->createView(),
]);
}
How can I write the javascript to submit this form via ajax?

Answer 1

Call your ajax on your html using a button or another element
$.ajax({
type: 'POST',
url: "{{ url('app_admin_add_article') }}",
data: {
name: document.getElementById("nameInput").value,
description: document.getElementById("descriptionInput").value
},
success: function(data) {
alert(data);
},
error: function(err) {
alert(err);
}
});
and get the data sent by ajax in your controller
/**
* #Route("/admin/article/add", name="app_admin_add_article")
*/
public function addCustomer(Request $request)
{
// throw exception if not ajax call
if (!$request->isXmlHttpRequest()) {
throw new NotFoundHttpException();
}
$name = $request->request->get('name');
$description = $request->request->get('description');
$article = new Article();
$article->setName($name);
$article->setDescription($description);
$entityManager = $this->getDoctrine()->getManager();
$entityManager->persist($article);
$entityManager->flush();
return new Response('Article created');
}
This is just a basic example without validating the input values and considering your class extends Controller

Answer 2

i guess you ajax request should look somthing like this :
$.ajax({
type: 'POST',
url: $("form").attr("action"),
data: $("form").serialize(),
//or your custom data either as object {foo: "bar", ...} or foo=bar&...
success: function(response) { ... },
});
and you have to fire it with on click function on the submit button after preventing default for the button :
e.preventDefault();
and in this case you have to change your controller logic.
but if i may ask why do you want to submit with ajax ?