jquery - How to handle user generated form with multiple levels of tabs and modules in PHP? -

so have interface users build own display. allows them add jquery tabs 1st , 2nd level. , on 2nd level, can add in modules text box , image box.

here screenshot of interface

so screenshot can see 1st level of tabs can have number of tabs , 2nd level. , 2nd level have modules.

i can't wrap ahead around how can handle form in php. how can save , spit out when needed? how guys handle this?

thanks...

nice interface. should do:

the database structure:

store tabs hierarchical in: {tabid}|{parentid}|{tabname} store text , images in: {id}|{tabid}|{content}|{type}

the html structure:

build 1 form , put tab structure in it. maybe take at: http://twitter.github.io/bootstrap/javascript.html#tabs

example:

       <form method="post" action="savetabbedinterface">        <ul class="nav nav-tabs" id="mytab">         <li class="active"><a href="#home">home</a></li>         <li><a href="#profile">profile</a></li>         <li><a href="#messages">messages</a></li>         <li><a href="#settings">settings</a></li>         </ul>          <div class="tab-content">         <div class="tab-pane active" id="home">...</div>         <div class="tab-pane" id="profile">...</div>         <div class="tab-pane" id="messages">...</div>         <div class="tab-pane" id="settings">...</div>         </div>        </form> 

when form submit tabs content saved once.

use form inputs indices (array(s) of arrays) see: how post data indexed array of arrays (without specifying indexes)

actions:

when user adds tab: -add hidden field form with: name="tabs[0][{numberoftabs+1}]" value="{tabname}"

when user adds sub tab: -add hidden field form with: name="tabs[parenttabid][{numberofsubtabsforthisparent+1}]" value="{tabname}" -create content

when user adds image box: add content name="images[{tabid}][]"

when user adds text box: add content name="texts[{tabid}][]">

use javascript or jquery add elements dynamically.

when form has been submit can iterate $_post['tabs'], etc store information of interface.

in stead of {numberoftabs+1} can use empty array [] have save order of tabs in case after submit.

form field indices number can cause problems. add char before numbers prevent this: name="tabs[p0][t{numberoftabs+1}]"

good luck

update: generate prototype adding , saving tabs, see: http://bootply.com/61771. prototype uses twitter bootstrap , jquery.

adding tabs , sub tabs generate form like:

<input type="hidden" value="tab 1" name="tabs[p0][t1]"> <input type="hidden" value="tab 2" name="tabs[p0][t2]"> <input type="hidden" value="tab 3" name="tabs[p0][t3]"> <input type="hidden" value="subtab 1" name="tabs[p2][t1]"> <input type="hidden" value="subtab 2" name="tabs[p2][t2]"> <input type="hidden" value="subtab 3" name="tabs[p2][t3]"> <input type="hidden" value="subtab 1" name="tabs[p1][t1]"> <input id="savebutton" class="btn" type="submit" value="save interface"> 

after submit form use php save input, print_r[$_post]:

array ( [tabs] => array ( [p0] => array ( [t1] => tab 1 [t2] => tab 2 [t3] => tab 3 ) [p2] => array ( [t1] => subtab 1 [t2] => subtab 2 [t3] => subtab 3 ) [p1] => array ( [t1] => subtab 1 ) ) )