How can I keep data previously entered in a Symfony form? - forms

Question

I want to keep data that have been entered in fields belonging to a form. I made this form so that the user creates an event. The reason is I included an other form to create a post address, so when the user submit his new address, he retrieves the information previously entered.
Do you have any idea how I can do this ?
(I apologize for all the bootstrap classes in my code.)
event_create.html.twig
{% extends 'base.html.twig' %}
{% block main %}
<div class="events">
<h1 class="display-2 text-center event_form_title">Création d'une nouvelle sortie ou d'une nouvelle activité</h1>
{{ form_start(eventform, {'attr' : {'class' : 'admin_form', 'novalidate': 'novalidate'}}) }}
<div class="d-flex justify-content-center">
<div id="eventform">
<div class="mb-3">
<p>Type</p>
{{ form_widget(eventform.category, {'value' : category.id} ) }}
</div>
<div class="mb-3">
<p>Titre</p>
{{ form_widget(eventform.title) }}
</div>
<div class="mb-3">
<p>Description</p>
{{ form_widget(eventform.description, {'attr' : {'rows' : '3'}} ) }}
</div>
<div class="mb-3 d-none">
<p>Langue à partiquer</p>
{{ form_widget(eventform.spokenlanguage) }}
</div>
<div class="mb-3" id="dateselection">
<p>Date</p>
{{ form_widget(eventform.start.date) }}
</div>
<div class="d-sm-flex justify-content-center">
<div class="d-flex justify-content-center justify-content-sm-end me-sm-3">
<div class="mb-3">
<p>Début</p>
{{ form_widget(eventform.start.time, {'attr' : {'class' : 'time_event'}} ) }}
</div>
</div>
<div class="d-flex justify-content-center justify-content-sm-start">
<div class="mb-3">
<p>Fin</p>
{{ form_widget(eventform.end, {'attr' : {'class' : 'time_event'}} ) }}
</div>
</div>
</div>
<div class="mb-3">
<p>Adresse</p>
{{ form_widget(eventform.address) }}
</div>
<button type="button" onclick="hideAddressButton(); showLocationForm();" class="btn btn-lg btn-outline-secondary w-100 mt-4 mb-5" id="showaddress">Créer une adresse</button>
<div class="d-flex justify-content-center" id="eventsubmit">
{{ form_widget(eventform.save, {'label': "Je valide", 'attr' : {'class' : 'btn btn-lg btn-outline-primary w-100 mb-5'}} ) }}
</div>
<div class="d-flex justify-content-center">
<span class="me-2"><</span> Retour à la liste
</div>
</div>
</div>
</div>
{{ form_end(eventform) }}
<!-- Sélectionner/Ajouter une langue -->
{{ form_start(languageform, {'attr' : {'id' : 'languageform', 'class' : 'mb-3'}}) }}
<p>Langue à pratiquer</p>
{{ form_widget(languageform.code, {'attr': {'onChange': 'selectLanguage();'} }) }}
{{ form_widget(languageform.name, {'attr': {'class': 'd-none'} }) }}
{{ form_widget(languageform.save, {'attr': {'class': 'd-none'} }) }}
{{ form_end(languageform) }}
<ul class="language_names d-none">
{% for language in languages %}
<li class="language_name">{{ language.name }}</li>
{% endfor %}
</ul>
<ul class="language_ids d-none">
{% for language in languages %}
<li class="language_id">{{ language.id }}</li>
{% endfor %}
</ul>
<!-- Créer/Ajouter une adresse -->
{{ form_start(locationform, {'attr' : {'id' : 'locationform'}}) }}
<hr>
<h1 class="display-2 mb-5">Création d'un lieu de rendez-vous</h1>
<div class="d-flex justify-content-center">
<div>
<div class="mb-3">
<p>Nom du lieu</p>
{{ form_widget(locationform.name) }}
</div>
<div class="d-sm-flex justify-content-center">
<div class="d-flex justify-content-center justify-content-sm-end me-sm-3">
<div class="mb-3">
<p>Numéro</p>
{{ form_widget(locationform.number, {'attr' : {'class' : 'numbers_address'}}) }}
</div>
</div>
<div class="d-flex justify-content-center justify-content-sm-start">
<div class="mb-3">
<p>Rue</p>
{{ form_widget(locationform.street, {'attr' : {'class' : 'texts_address'}}) }}
</div>
</div>
</div>
<div class="d-sm-flex justify-content-center">
<div class="d-flex justify-content-center justify-content-sm-end me-sm-3">
<div class="mb-3">
<p>Code postal</p>
{{ form_widget(locationform.zipcode, {'attr' : {'class' : 'numbers_address'}}) }}
</div>
</div>
<div class="d-flex justify-content-center justify-content-sm-start">
<div class="mb-3">
<p>Ville</p>
{{ form_widget(locationform.city, {'attr' : {'class' : 'texts_address'}}) }}
</div>
</div>
</div>
<div class="mb-3">
<p>Grande ville</p>
{{ form_widget(locationform.bigcity) }}
</div>
<button type="button" onclick="hideBigCityButton(); showBigCityForm();" class="btn btn-lg btn-outline-secondary w-100 mt-4" id="showbigcity">Ajouter une grande ville</button>
<div id="bigcity">
{% include "front/create/bigcity.html.twig" %}
</div>
<div class="d-flex justify-content-center my-5">
{{ form_widget(locationform.save, {'label': "Enregistrer une nouvelle adresse", 'attr' : {'class' : 'btn btn-lg btn-outline-primary w-100'}} ) }}
</div>
</div>
</div>
<hr>
{{ form_end(locationform) }}
{% endblock %}
EventController.php
<?php
namespace App\Controller\Front;
class EventController extends AbstractController
{
#[Route('/create/event/category/{id}', name: 'event_create', methods: ['GET', 'POST'])]
public function createEvent(
Request $request,
Category $category,
LanguageRepository $languageRepository,
CountryRepository $countryRepository,
EntityManagerInterface $entityManagerInterface,
UserRepository $userRepository,
LocationRepository $locationRepository
){
$languages = $languageRepository->findAll();
$language = new Language();
$languageform = $this->createForm(EventLanguageType::class, $language);
$languageform->handleRequest($request);
if ($languageform->isSubmitted() && $languageform->isValid()) {
$entityManagerInterface->persist($language);
$entityManagerInterface->flush();
}
$connected = $this->getUser();
$useremail = $connected->getUserIdentifier();
$user = $userRepository->findOneBy(['email' => $useremail]);
$location = new Location();
$locationform = $this->createForm(LocationType::class, $location);
$locationform->handleRequest($request);
if ($locationform->isSubmitted() && $locationform->isValid()) {
$location->setOrganizer($user);
$entityManagerInterface->persist($location);
$entityManagerInterface->flush();
}
$bigcity = new BigCity();
$bigcityform = $this->createForm(BigCityType::class, $bigcity);
$bigcityform->handleRequest($request);
if ($bigcityform->isSubmitted() && $bigcityform->isValid()) {
$entityManagerInterface->persist($bigcity);
$entityManagerInterface->flush();
}
$countries = $countryRepository->findAll();
$country = new Country();
$countryform = $this->createForm(NewCountryType::class, $country);
$countryform->handleRequest($request);
if ($countryform->isSubmitted() && $countryform->isValid()) {
$entityManagerInterface->persist($country);
$entityManagerInterface->flush();
}
$event = new Event();
$eventform = $this->createForm(EventType::class, $event, [
'addresses' => $locationRepository->findBy(['organizer' => $user])
]);
$eventform->handleRequest($request);
if ($eventform->isSubmitted() && $eventform->isValid()) {
$event->setOrganizer($user);
$entityManagerInterface->persist($event);
$entityManagerInterface->flush();
$participation = new Participation();
$participation->setParticipant($user);
$participation->setEvent($event);
$entityManagerInterface->persist($participation);
$entityManagerInterface->flush();
return $this->redirectToRoute('participations');
}
return $this->renderForm('front/event/create.html.twig', [
'eventform' => $eventform,
'languageform' => $languageform,
'languages' => $languages,
'locationform' => $locationform,
'bigcityform' => $bigcityform,
'countryform' => $countryform,
'countries' => $countries,
'category' => $category
]);
}
This is my trial with AJAX, but it does not work :
<script>
// I bring values entered in form and I send it with Ajax
inputs = document.querySelectorAll(["input", "select"]);
function saveDatas(){
let xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", false);
xhr.setRequestHeader("Content-type", "application/json");
post = {
title: document.getElementById('event_title').value,
description: document.getElementById('event_description').value,
};
xhr.send(JSON.stringify(post));
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status <= 299) {
data = JSON.parse(xhr.response)
}
}
}
for (var i = 0 ; i < inputs.length; i++) {
inputs[i].addEventListener('click', saveDatas);
}
// I retrieve values and I entered them in form fields
languageform = document.getElementById('languageform');
function retrieveDatas(){
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", false);
xhr.send();
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status <= 299) {
posts = JSON.parse(xhr.response)
posts.forEach((post) => {
document.getElementById('event_title').value = post.title;
document.getElementById('event_description').value = post.description;
})
}
}
}
languageform.addEventListener('submit', retrieveDatas);
</script>

Answer 1

I'm not sure to understand. You have a lot of ways to do it. You can use ajax and javascript (Stimulus is very good and documented on SymfonyCast) to avoid to reload page and create your new address. With Stimulus, your data-controller sent an ajax request, create the new address and update its own content.
You can merge your forms (so all data are sent) with two buttons (so you know which button has been push and which action is triggered. Then in your controller, you create the new address and send back all other data.
A third solution is to read this answer. It could help you.
IMO, the first solution is more user friendly.