Fonction enregistrerPage() JS

Bonjour à tous,

Je travaille actuellement sur un projet où je dois pouvoir via un bouton qui appelle une fonction js/ajax et qui est ensuite diriger vers un controller php, enregistrer les modifications des éléments sur ma page (ajout/modification de texte, ajout d'éléments (article, image...) et aussi pouvoir modifier d'autres infos telles que (l'intitulé du magazine, le numéro, la période etc).

Pour cela j'ai deja une fonction enregistrer de faite qui me permet d'enregistrer les éléments (ajout texte, article...). Je voudrais completer cette fonction pour aussi enregistrer les données des inputs que j'ai rajouté (l'intitulé du magazine, le numéro, la période etc)

J'ai testé plusieurs manières de faire mais aucune ne s'est avérer concluante pour l'instant...

Je vous met ci-dessous les différents morceaux de code en lien avec mon problème :

Ma fonction js enregistrerPage() : (J'ai voulu répéter le process qui me permet d'enregistrer les éléments pour qu'il s'applique aussi sur les inputs)

Si vous y voyez des incohérences ou si vous avez des questions, merci de me les communiquer en dessous svp

function enregistrerPage(tableaudebord){   // gérer l'enregistrement des inputs ici
  $('#loading').show();
  $('.element_pdf').children('div').attr('contenteditable', 'true');
  $('.img_block').attr('contenteditable', 'false');
  $('.element_pdf').children('.block_choix_new_article').attr('contenteditable', 'false');
  $('.element_pdf').children('.block_choix_new_article').attr('contenteditable', 'false');
  $('.btn_suppr_element').remove();
  $('.input_pdf').attr('contenteditable', 'true'); // pour les inputs
  var tableau_result = {};
  var i = 0;
  var tableau_result_input = {};
  var j = 0;
  $('.element_pdf').each(function(){
    var id_element = $(this).data('idelement');
    var ordre = $(this).data('ordre');
    var contenue = $(this).html();
    var col = $(this).data('col');
    tableau_result['tableau_'+i]={"id_element" : $(this).data('idelement'), "ordre" : $(this).data('ordre'), "contenu" : $(this).html(),"col":$(this).data('col')};
    i++;
  });
  $('.input_pdf').each(function(){
    var periode_mag = $(this).data('periodemag');
    var intitule_mag = $(this).data('intitulemag');
    var numero_mag = $(this).data('numeromag');
    tableau_result_input['tableau_input'+j]={"periode_mag" : "$(this).data('periodemag')", "intitule_mag" : $(this).data('intitulemag'), "numero_mag" : $(this).data('numeromag')};
    j++;
    /*var numero_mag = document.getElementById('numeromag').value;
    var periode_mag = document.getElementById('periodemag').value;
    var intitule_mag = document.getElementById('intitulemag').value;
    var nom_page = document.getElementById('nompage').value;
    tableau_result_input['tableau_input'+j]={"Numeromag": document.getElementById('numeromag').value, "Periodemag": document.getElementById('periodemag').value, "Intitulemag" : document.getElementById('intitulemag').value, "Nompage" : document.getElementById('nompage').value};
    j++;*/
  })
  $.ajax({
        type: 'POST',
        async: false,
        url: Routing.generate('enregistrerPage'),
        data: tableau_result, tableau_result_input,
        success: function(){
          $("#sauvegarde_success").show();
          $('#sauvegarde_success').delay(2500).fadeOut('blind');
          if (tableaudebord!=1) {
            location.reload();
          }
           
        }
  });

Voici ma fonction enregistrerPageAction dans mon controller php :

/**
     * @Route("/enregistrerPage",name="enregistrerPage",options={"expose"=true})
     */
    public function enregistrerPageAction(Request $request)
    {
        if ($request->isXmlHttpRequest()) {
          $repository = $this
            ->getDoctrine()
            ->getManager()
            ->getRepository('CompteBundle:element_page');
          $em = $this->getDoctrine()->getManager();
          //$em2 = $this->getDoctrine()->getManager();
 
          $data = $request->request->All();
          $nbr_element = count($data);
          for ($i=0; $i < $nbr_element; $i++) {
            $element = $em->getRepository('CompteBundle:element_page')->find($data['tableau_'.$i]['id_element']);
            $element-> setElementCol($data['tableau_'.$i]['col']);
            $element-> setElementOrdre($data['tableau_'.$i]['ordre']);
            $element-> setElementContenu(trim($data['tableau_'.$i]['contenu']));
            $em->persist($element);
            $em->flush();
          }
          // gestion des inputs
          $txt  = "";
          for($j=0; $j < $nbr_element; $j++) {
            $valeur_input = $em->getRepository('CompteBundle:Magazines')->find($data['tableau_input'.$j]['Numeromag']);
            $valeur_input->setmagazineNumero($data['tableau_input'.$j]['Numeromag']);
            $valeur_input->setmagazinePeriode($data['tableau_input'.$j]['Periodemag']);
            $valeur_input->setmagazineIntitule($data['tableau_input'.$j]['Intitulemag']);
            $txt  = $valeur_input;
            $em->persist($valeur_input);
            $em->flush();
            //$valeur_input2 = $em2->getRepository('CompteBundle:Pages')->find()
          }
          $fp = fopen("ajax.txt", "r+");
          fseek ($fp, 0);
          fputs ($fp, $txt);
          fclose ($fp);
          return new Response('ok');
        }else{
            throw new Exception("Erreur");
        }
    }

Voici mes différents inputs en question dans mes vues twig :

<div class="periode_mag" style="color:{{couleur_page}};">
        <input type="text" id="periode_mag" class="input_pdf" data-periodemag="{{magazine.magazinePeriode}}" data-intitulemag="{{magazine.magazineIntitule}}" style="background:transparent;border:transparent;width:400px;text-align:right;" value="{{magazine.magazinePeriode}} - {{magazine.magazineIntitule}}">
    </div>
    <div class="numero_mag" style="color:{{couleur_page}};">
        <div class="form-inline">
        <label for="form-control">N°</label><input type="text" id="numero_mag" style="color:#FFFFFF;background:transparent;border:transparent;font-size:43px;margin-top:-9px;margin-left:-10px;width:100px" class="form-control input_pdf" data-numeromag="{{magazine.magazineNumero}}" value="{{magazine.magazineNumero}}"> {#{{magazine.magazineNumero}}#}
        </div>
    </div>
 
<input type="text" id="intitule_mag" data-intitulemag="{{titre_magazine}}" style="background:transparent;border:transparent;text-align:center;" value="{{titre_magazine}}">
 
<input type="text" id="nom_page" {#id="numero_page"#} data-pagelabel="{{page_selectionne.pageLabel}}" data-pagenumero="{{page_selectionne.pageNumero}}" style="background:transparent;border:transparent;text-align:center;" value="{{page_selectionne.pageLabel}} {{page_selectionne.pageNumero}}">

Voila, j'espère que vous pourrez me venir en aide, c'est un travail important pour moi svp !

Merci d'avance