Dynamically add settings fields using AJAX in WordPress

I’m trying to build a settings form for wordpress plug-in.
I don’t know exactly how many options will be, so it have to be form with dynamic structure.
For building options form i use Settings API
and I can’t find a way to create dynamic fields.

I have array with default options:

Read More
 function filtered_install(){
    //defaults options
        $array= Array
    (
        '0' => 1,
        '1' => 1,
        '2' => 3
    );
        add_option('snso_fields_array',$array);
    }

add settings page:

# Register a new page in the "Settings" tab:
function filtered_add_admin_pages() {
    $page = add_options_page(
        'Setting search.',                                    // - page title administration
        'Search with filters',                                 // - the name of the menu item
        'manage_options',                                     // - the right of access to editing
        'filteder_search.php',                                // - slug
        'filtered_options_page'                               // - callback.
    );


}

add form:

function filtered_options_page() 
{
    echo '<div class="wrap">';
    screen_icon();                                          // - icon.
    echo '<form method="post" action="options.php">';       // - processing of the request.
    do_settings_sections('snso_page');                      // - output section.
    settings_fields('snso_fields');                         // - output fields belonging to the same group.
    echo '<a href='#' id='add'>Add new field</a>';      // - button that add more fields.
    submit_button();                                        // - submit button.
    echo '</form>';
    echo '</div>';
}

get repeatable field in form from array data:

# Register the field in the database and make out their display.
function filtered_options_fields(){


    register_setting('snso_fields', 'snso_fields_array'); // - register field in the database.

    add_settings_section(
        'snso_section_array',                                 // - section id.
        '',
        'snso_section_array_callback',                        
        'snso_page'                                           // - options page.
    );



    $options = get_option('snso_fields_array');

    foreach($options as $key=>$field) {
       //id, title (label), callback, page, section(from add_settings_section), args
       add_settings_field(
        "option_$key",
        "Field # $key",
        "business_setting",
        "snso_page",
        "snso_section_array",
        $key);
    }

    function business_setting($key) {
      $options = get_option('snso_fields_array');
      echo "<input name='snso_fields_array[$key]' id='option_$key' type='text' value='" . $options[$key] . "' />";
    }



}


# An array of fields with the saved settings:
function snso_section_array_callback() {
  echo '<p>The fields listed below are stored in one cell array table <code>wp_options</code>.</p>';
  echo '<pre><code>'; print_r(get_option('snso_fields_array')); echo '</code></pre>';
 }

than whan i click Add new field link with id ‘add’ i need update option ‘snso_fields_array’ in database

js. file:

jQuery(function(){

    jQuery('#add').click(function(evt){
    evt.preventDefault();
    var data = {
            action: 'update_options',
            my_var: 'my_data'
        };

        jQuery.post( ajaxurl, data);

});
});

register an action ‘update_options’:

add_action( 'wp_ajax_update_options', 'update_options_callback' );
add_action( 'wp_ajax_nopriv_update_options', 'update_options_callback' );

update option ‘snso_fields_array’:

function update_options_callback() {
    $new_value = $_POST['my_var'];
    if ($new_value ='my_data') {
        $new_array = get_option('snso_fields_array');
        $new_array[]='';
        update_option('snso_fields_array',$new_array);
    }

}

it’s work fine

now i need refresh my form with new data of ‘snso_fields_array’ option.

Related posts

Leave a Reply