Datamanagement Formular in Tabs(Register) aufteilen

Im Elementor sucht man sich sein Formular fürs Backend oder erstellt sich einen Onepager (alle Formularabschnitte auf einer Elementor-Seite)

Die gewünschten Tabulator-Seiten sollten jeweils in die gewünschten Sektionen (rosa) aufgeteilt sein und eine Klasse paxido_tab besitzen.

Die erste darin befindliche Überschrift (beachte das first() im Code) mit der Klasse paxido_head ergibt die Beschriftung des Tabulators.

In diesem Fall interne Felder und Persönliche Daten.

 

Am Ende des Formulars bedarf es noch eines Paxido-Javascript-Objektes m it folgendem Inhalt:

jQuery(document).ready(function()
{
   makePaxidoSectionTabs();
});

function makePaxidoSectionTabs()
{  
      var formID = ‚px-datamanagement-editing‘;

var newform = [];
jQuery(‚#’+formID + ‚ .section.paxido_tab‘).each(function(index, value)
{
     var mySectionName = jQuery(this).find(„.paxido_head“).first().text();
     var myDIV = jQuery(this).html();
     var myTabID = ‚tab-‚+index+“;

     myObj = [];
    myObj[‚tabID‘] = myTabID;
    myObj[‚tabName‘] = mySectionName;
    myObj[‚tabHTML‘] = myDIV;
    newform[index] = myObj;
});

var tabs = ‚<div id=“tabs“ style=“border:2px solid red;min-height:100px;“><ul id=“tableiste“></ul></div>‘;
jQuery(‚#’+formID).empty();
jQuery(‚#’+formID).append(tabs); 

var tabUL = jQuery(‚#tableiste‘);
var tabsDIV = jQuery(‚#tabs‘);
   for (let i = 0; i < newform.length; i++)
   {
      var myObject = newform[i];
      tabUL.append(‚<li><a href=“#’+myObject[‚tabID‘] +’“>’+myObject[‚tabName‘] +'</a></li>‘);
      tabsDIV.append(‚<div id=“‚+myObject[‚tabID‘]+’“>’+myObject[‚tabHTML‘]+'</div>‘ );
}

jQuery( „#tabs“ ).tabs();
px_initCheckboxen();
px_initRadioButtons();
}