How do I setup nested repeatable option fields?

Question

I'm trying to wrap my head around how to create a set of option fields that should be able to repeat for as many times as possible. But I'm having a hard time to figure out how to proceed.

Currently I've setup the visual interface for administering the options, but I have no idea how to save them into the options on save.

How would a logic look like that will be able to differentiate between different sections? Keeping each section as a separate array within the options array (I guess?) so that you're able to add as many sections that you want, with as many nested data fields as you want.

The idea is quite simple

1) Click add section to create a new section ————

2) A javascript creates the input fields for the section, where you can name.. ————

3) ..and associate multiple input fields to the section ————

4) You can also add more sections

The code I have atm is:

PHP

<?php
function rd_settings_page() {
    ?>
    <div class="wrap">
        <h2><?php _e( 'Settings', 'blog' ); ?></h2>
        <form enctype="multipart/form-data" action="options.php" method="POST">
            <?php settings_fields( 'rd-settings-group' ); ?>
            <?php do_settings_sections( 'rd-settings' ); ?>
            <?php submit_button(); ?>
        </form>
    </div>
    <?php
}

function rd_settings_api_init() {
    add_settings_section(
        'rd_blog_info_section',
        __( 'Blog info settings', 'blog' ),
        'rd_blog_info_section_callback_function',
        'rd-settings'
    );

    if ( 1 === get_current_blog_id() ) {        
        register_setting( 'rd-settings-group', 'rd_fashion_list' );
        register_setting( 'rd-settings-group', 'rd_blog_description' );
    }

    if ( 1 === get_current_blog_id() ) {        
        add_settings_field(
            'rd_fashion_list',
            __( 'Fashion Blogs', 'blog' ),
            'rd_fashion_list_callback_function',
            'rd-settings',
            'rd_blog_info_section'
        );
    }
}

add_action( 'admin_init', 'rd_settings_api_init' );

function rd_blog_info_section_callback_function() {
    echo '<p>Blog info settings</p>';
}

function rd_fashion_list_callback_function() {
    $setting = get_option( 'rd_fashion_list' );?>

    <div class="inner-wrap"></div>
    <span class="addsection button-primary">
        + Add Section
    </span>

    <?php
}

JS

$(document).on('click', '.addsection', function () {
    $(this).prev('.inner-wrap').append('<div class="section">'+
        '<input type="text" name="rd_facebook" id="rd-facebook" value=""/>'+
        ' Name for section'+
        '<ul>'+
        '<li>'+
        '<select>'+
        '<option value="" disabled="disabled" selected="selected">Please select a blog</option>'+
        '<option value="1">One</option>'+
        '<option value="2">Two</option>'+
        '</select>'+
        '<span class="close">×</span>'+
        '</li>'+
        '</ul>'+
        '<span class="addblog button">+ Add Blog</span>'+
        '</div>');
});

$(document).on('click', '.addblog', function () {
    $(this).prev('ul').append('<li>'+
        '<select>'+
        '<option value="" disabled="disabled" selected="selected">Please select a blog</option>'+
        '<option value="1">One</option>'+
        '<option value="2">Two</option>'+
        '</select>'+
        '<span class="close">×</span>'+
        '</li>');
});

Answer 1

Not a direct answer to your specific case but this will probably help you figure out how to do it.

I found an article here: http://www.sutanaryan.com/jquery-duplicate-fields-form-submit-with-php/ which details the process of posting fields which can be repeated using jQuery.

In his example he creates an HTML form:

<form action="process.php" method="post">
    <p class="clone">
        <label> Name: </label>
        <input type="text" name="name[]" />
    </p>
    <p><a href="#" class="name" rel=".clone">Add Name</a></p>
    <p><input type="submit" value="Submit" /></p>
</form>

and sets it repeatable:

$(document).ready(function(){
    var removeName = '<a href="#" onClick="$(this).parent().slideUp(
    function(){$(this).remove()}); return false">remove</a>';
    $('a.name').relCopy({append:removeName});
});

and loops thru each field until there are 0 fields left to loop thru, saving each field to a table within the database.

$names=$_POST['name'];

if(isset($names)) {
    foreach($names as $name) {
        if(strlen($name)>0) {
            $sql=mysql_query("INSERT INTO tbl_name(name) VALUES ('$name')");
        } else {
            echo 'Oops no value to be inserted.';
        }
    }
}

---

Searching further I found another article which details a similar process here: I just skimmed it right now but am bookmarking it to read tomorrow.

http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/