illegal offset in option add

Question

I downloaded a plugin to dissect that I could use to learn the settings api with. It's a simple background uploader and as you can see fairly straight forward. When trying to recreate it however using my own set of options I almost always run into an illegal offset warning. After reading up on the issue the problem seems to be rooted in the option not being defined as an array and thus not recognizing the 'image' key. My question, with this code working absolutely fine, where within this script does it define the option as a usable array? I write what appears to be exactly the same thing, only changing the option names, and keep getting an illegal offset warning.

<script type="text/javascript">
    //<![CDATA[
        jQuery(document).ready(function()
        {
            // Media Uploade
            window.widgetFormfield = '';

            jQuery('.upload_image_button').live('click', function() {
                window.widgetFormfield = jQuery('.upload_field',jQuery(this).parent());
                tb_show('Choose Image', 'media-upload.php?TB_iframe=true');
                return false;
            });

            window.original_send_to_editor = window.send_to_editor;
            window.send_to_editor = function(html) {
                if (window.widgetFormfield) {
                    imgurl = jQuery('img',html).attr('src');
                    window.widgetFormfield.val(imgurl);
                    tb_remove();
                }
                else {
                    window.original_send_to_editor(html);
                }
                window.widgetFormfield = '';
                window.imagefield = false;

                jQuery('#fsb_preview_image').attr('src', imgurl); 
            }   
        });
    //]]>   
  </script> 

<div class="wrap">
    <div id="fsb-wrap" class="fsb-help">
        <h2>Full Screen Background Image</h2>
        <?php
        if ( ! isset( $_REQUEST['updated'] ) )
            $_REQUEST['updated'] = false;
        ?>
        <?php if ( false !== $_REQUEST['updated'] ) : ?>}
        <div class="updated fade"><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
        <?php endif; ?>
        <form method="post" action="options.php">

            <?php settings_fields( 'fsb_register_settings_4' ); ?>

            <h4>Choose Your Image</h4>

            <p>
                <input id="fsb_settings_4[image]" name="fsb_settings_4[image]" type="text" class="upload_field" value="<?php echo $fsb_options['image']; ?>"/>
                <input class="upload_image_button button-secondary" type="button" value="Choose Image"/>
                <label class="description" for="fsb_settings_2[image]"><?php _e( 'This image will be applied to the background of your website' ); ?></label>
            </p>

            <p>
                <?php if($fsb_options['image']) { ?>
                    <img src="<?php echo $fsb_options['image']; ?>" id="fsb_preview_image" style="padding: 3px; border: 1px solid #f0f0f0; max-width: 600px; overflow: hidden;"/>
                <?php } else { ?>
                    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'preview.jpg'; ?>" id="fsb_preview_image" style="padding: 3px; border: 1px solid #f0f0f0; max-width: 600px; overflow: hidden;"/>
                <?php } ?>
            </p>

            <!-- save the options -->
            <p class="submit">
                <input type="submit" class="button-primary" value="<?php _e( 'Save Options' ); ?>" />
                <p><?php echo esc_url( $fsb_options['image'] ) ?> </p>
            </p>


        </form>
    </div><!--end fsb-wrap-->
</div><!--end wrap-->
<?php   

    }
function fsb_init_admin() {
add_menu_page( 'General Settings', 'General Settings', 'administrator',   'display-      settings', 'fsb_admin_page' );
}
add_action('admin_menu', 'fsb_init_admin');

// register the plugin settings
function fsb_register_settings() {
register_setting( 'fsb_register_settings_4', 'fsb_settings_4' );
}
add_action( 'admin_init', 'fsb_register_settings' );

Answer 1

The array is 'hidden' inside the form elements. Their respective name/ID is like MY_option_name[some_other_name]. That is the array structure.

// Edit (to elaborate a little on that)

Suppose you have the following form:

<form action="options.php" method="post">
    Font:<br />
    <input type="text" name="MY_options[font]" id="MY_options[font]" />
    Color:<br />
    <input type="text" name="MY_options[color]" id="MY_options[color]" />
    <?php submit_button(); ?>
</form>

If you submit the form, it will do the same as the following:

$my_options = array(
    'font' => YOUR_FONT_INPUT,
    'color' => YOUR_COLOR_INPUT,
);
update_option('MY_options', $my_options);

BUT - every option declared and set before will be unset and thus deleted if you do not incorporate its current value into your form! So be sure to first read the options and store the ones you don't want to update (but still want to keep!) inside hidden input fields within the form. Like so:

foreach (get_option('MY_options') as $option_name => $option_value) {
    switch ($option_name) {
        case 'font':
        case 'color':
            break;
        default:
            echo '<input type="hidden" name="'.$option_name.'" value="'.$option_value.'" />";
    }
}