Why aren't these WordPress options being saved to the database correctly?

Question

I have a plugin for editing certain options already stored in the database. It creates an options page under Settings with a simple form that populates each field with whatever values are stored in the database for the given field.

When the page loads, each of the options loaded into the fields are correct, but if I edit any of the fields and click "Save changes", all of the fields on the page are cleared out, in addition to deleting their corresponding values from the database. Why is this?

<?php
/** Plugin name: Client OAuth/REST Configuration
 * Plugin URI: uri
 * Description: description
 * Author: author
 * Author URI: author uri
 * Version: 0.02
 */  


function register_myplugin_options_settings(){
    register_setting('myplugin_options_group', 'api_username');
    register_setting('myplugin_options_group', 'api_password');
    register_setting('myplugin_options_group', 'client_id');
    register_setting('myplugin_options_group', 'client_secret');
    register_setting('myplugin_options_group', 'auth_url');
    register_setting('myplugin_options_group', 'token_url');
    register_setting('myplugin_options_group', 'rest_url');
    register_setting('myplugin_options_group', 'callback_url');
}
add_action( 'admin_init', 'register_myplugin_options_settings' );


function register_myplugin_options_options_page() {
    add_options_page('Client OAuth REST Configuration', 'Settings', 'manage_options', 'myplugin', 'myplugin_options_page');
}
add_action('admin_menu', 'register_myplugin_options_options_page');


function myplugin_options_page() {
?>
    <div>
    <?php screen_icon(); ?>
    <h2>Oauth/REST Config Setting</h2>
        <form method="post" action="options.php">
        <?php settings_fields( 'myplugin_options_group' ); ?>
        <p>To store the Client Oauth and REST configuration settings in order to access the REST API.</p>
        <table>
            <tr valign="top">
            <th scope="row"><label for="myplugin_api_username">API Login Username</label></th>
            <td><input type="text" id="myplugin_api_username" name="myplugin_api_username" style="width: 145px" value="<?php echo get_option('api_username'); ?>" /></td>
        </tr>

        <tr valign="top">
            <th scope="row"><label for="myplugin_api_password">API Login Password</label></th>
            <td><input type="password" id="myplugin_api_password" name="myplugin_api_password" style="width: 145px" value="<?php echo get_option('api_password'); ?>" /></td>
        </tr>

        <tr valign="top">
            <th scope="row"><label for="myplugin_client_id">OAuth Client ID</label></th>
            <td><input type="text" id="myplugin_client_id" name="myplugin_client_id" style="width: 300px" value="<?php echo get_option('client_id'); ?>" /></td>
        </tr>

        <tr valign="top">
            <th scope="row"><label for="myplugin_client_secret">OAuth Client Secret</label></th>
            <td><input type="password" id="myplugin_client_secret" name="myplugin_client_secret" style="width: 145px" value="<?php echo get_option('client_secret'); ?>" /></td>
        </tr>

        <tr valign="top">
            <th scope="row"><label for="myplugin_auth_url">Login URL</label></th>
            <td><input type="text" id="myplugin_auth_url" name="myplugin_auth_url" style="width: 375px" value="<?php echo get_option('auth_url'); ?>" /></td>
        </tr>
  
        <tr valign="top">
            <th scope="row"><label for="myplugin_token_url">OAuth Token URL</label></th>
            <td><input type="text" id="myplugin_token_url" name="myplugin_token_url" style="width: 375px" value="<?php echo get_option('token_url'); ?>" /></td>
        </tr>

        <tr valign="top">
            <th scope="row"><label for="myplugin_rest_url">REST URL</label></th>
            <td><input type="text" id="myplugin_rest_url" name="myplugin_rest_url" style="width: 375px" value="<?php echo get_option('rest_url'); ?>" /></td>
        </tr>

        <tr valign="top">
          <th scope="row"><label for="myplugin_callback_url">Callback URL</label></th>
          <td><input type="text" id="myplugin_callback_url" name="myplugin_callback_url" style="width: 495px" value="<?php echo get_option('callback_url'); ?>" /></td>
        </tr>
        </table>
        <?php  submit_button(); ?>
    </form>
</div>
<?php
}?>

Answer 1

The options are not being saved correctly because you used the wrong input name — it should match the second parameter for register_setting(). So for example, with register_setting('myplugin_options_group', 'api_username'), the input name should be api_username, but then you used myplugin_api_username.

Additionally, it should be noted that screen_icon() has long been deprecated.