<select> dropdown option value is not saved to database in wordpress plugin settings page

Question

I'm building a Wordpress plugin with a settings page in the admin dashboard. I have several inputs including text fields, checkbox and select dropdowns.

I save the data with a <form> to options.php, as is recommended by Wordpress.

The checkbox and text field values successfully get saved to the database on submit, but the <select> element (the selected option) does not. I can't understand why.

This is my code:

<?php
//Create menu link
function awb_options_menu_link() {
    $awb_options_page = add_options_page(
        'Add WhatsApp Button Options', // title
        'Add WhatsApp Button', // title of the menu link
        'manage_options', // capabilities credentials, at least able to X
        'awb-options', // menu URL slug
        'awb_options_content' // name of the function that displays the option page content
    );
}

function awb_validate_inputs( $input ) {

    // Create our array for storing the validated options
    $output = array();

    // Loop through each of the incoming options
    foreach( $input as $key => $value ) {

        // Check to see if the current option has a value. If so, process it.
        if( isset( $input[$key] ) ) {

            // Strip all HTML and PHP tags and properly handle quoted strings
            $output[$key] = strip_tags( stripslashes( $input[ $key ] ) );

        } // end if

    } // end foreach

    // Return the array processing any additional functions filtered by this action
    return apply_filters( 'awb_validate_inputs', $output, $input );
}

// Create a select dropdown form input for awb_settings[distance_from_bottom_mu]
function  distance_from_bottom_mu_dropdown_fn() {
    $items = array("px", "%");
    $option_with_default = isset( $awb_settings['distance_from_bottom_mu'] ) ? $awb_settings['distance_from_bottom_mu'] : '%';
    echo "<select id=\"awb_settings[distance_from_bottom_mu]\" name=\"awb_settings[distance_from_bottom_mu]\" style=\"vertical-align: baseline;\">";
    foreach($items as $item) {
        $selected = ($option_with_default == $item) ? 'selected="selected"' : '';
        echo "<option value=\"$item\" $selected>$item</option>";
    }
    echo "</select>";
}

// Create options page content
function awb_options_content() {

    // Init Options Global
    global $awb_options;

    // Create default button text
    $button_text = isset( $awb_options['button_text'] ) ? sanitize_text_field( $awb_options['button_text'] ) : _e('Send us a WhatsApp', 'add-whatsapp-button');
    $awb_location_values = array('right', 'left');

    ob_start(); ?>

        <div class="wrap">
            <h2><?php _e('Add WhatsApp Button Settings', 'add-whatsapp-button') ?></h2>
            <p><?php _e('Settings page for the Add WhatsApp Button plugin. Check out the preview screen below to see how your button would look on a smartphone before saving your settings to the database.', 'add-whatsapp-button') ?></p>

            <form method="POST" action="options.php">
                <?php settings_fields('awb_settings_group'); ?>
                <table class="form-table">
                    <tbody>
                        <tr>
                            <th scope="row"><label for="awb_settings[enable]"><?php _e('Enable WhatsApp Button', 'add-whatsapp-button') ?></label></th>
                            <td><input name="awb_settings[enable]" type="checkbox" id="awb_settings[enable]" value="1" <?php checked('1', $awb_options['enable']); ?>></td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="awb_settings[button_text]"><?php _e('Button Text', 'add-whatsapp-button') ?></label></th>
                            <td>
                                <input name="awb_settings[button_text]" type="text" id="awb_settings[button_text]" value="<?php echo $button_text; ?>" class="regular-text">
                                <p class="description"><?php _e('Enter the text you want the button to show. Recommended: up to 18 characters.', 'add-whatsapp-button'); ?></p>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="awb_settings[breakpoint]"><?php _e('Breakpoint', 'add-whatsapp-button') ?></label></th>
                            <td>
                                <input name="awb_settings[enable_breakpoint]" type="checkbox" id="awb_settings[enable_breakpoint]" value="1" <?php checked('1', $awb_options['enable_breakpoint']); ?>>
                                <p class="description"><?php _e('Check this box in order to only display the WhatsApp button up to a certain screen width.', 'add-whatsapp-button'); ?></p>
                                <div id="awb_breakpoint" class="bp-no-show">
                                    <input name="awb_settings[breakpoint]" type="number" id="awb_settings[breakpoint]" value="<?php echo sanitize_text_field( $awb_options['breakpoint'] ); ?>" class="small-text"><?php _e('px', 'add-whatsapp-button'); ?>
                                    <p class="description"><?php _e('Enter your desired screen width breakpoint here. Default is 600px.', 'add-whatsapp-button'); ?></p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="awb_settings[button_bg_color]"><?php _e('Button Background Color', 'add-whatsapp-button') ?></label></th>
                            <td>
                                <!-- <input name="awb_settings[button_bg_color]" type="text" id="awb_settings[button_bg_color]" value="<?php //echo $awb_options['button_bg_color']; ?>" class="regular-text" /> -->
                                <input name="awb_settings[button_bg_color]" type="text" id="awb_settings[button_bg_color]"  value="<?php echo sanitize_text_field( $awb_options['button_bg_color'] ); ?>" class="udi-color-picker" />
                                <p class="description"><?php _e('Choose a background color for your button. Default is green (#20B038)', 'add-whatsapp-button'); ?></p>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row"><label for="awb_settings[distance_from_bottom]"><?php _e('Button Distance from Bottom', 'add-whatsapp-button') ?></label></th>
                            <td>
                                <input name="awb_settings[distance_from_bottom]" type="number" id="awb_settings[distance_from_bottom]"  value="<?php echo sanitize_text_field( $awb_options['distance_from_bottom'] ); ?>" class="small-text" />
                                <?php distance_from_bottom_mu_dropdown_fn(); ?>
                                <p class="description"><?php _e('Choose your button\'s Distance from the bottom of the screen, in percentages or pixels. Default is 10%.', 'add-whatsapp-button'); ?></p>
                            </td>
                        </tr>
                        <th scope="row"><label for="awb_settings[button_location]"><?php _e('Button Location on Screen', 'add-whatsapp-button') ?></label></th>
                            <td>

                                <select id="awb_settings[button_location]" name="awb_settings[button_location]" style="vertical-align: baseline;">
                                    <option value="right" <?php selected( $awb_settings['button_location'], 'right' ); ?>>right</option>
                                    <option value="left" <?php selected( $awb_settings['button_location'], 'left' ); ?>>left</option>
                                </select>

                                <p class="description"><?php _e('Choose whether your button will appear on the left side or right side of the screen', 'add-whatsapp-button'); ?></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h2><?php _e('Button Preview', 'add-whatsapp-button'); ?></h2>
                <div class="device-wrapper"> <!-- Mockup Container -->
                    <div class="device" data-device="iPhone7" data-orientation="portrait" data-color="black">
                        <div class="screen">
                            <div id="admin-wab-cont" class="wab-cont"> <!-- Button Preview HTML -->
                                <a id="whatsAppButton" href="https://api.whatsapp.com/send?phone=972544480070&text=%D7%94%D7%99%D7%99%2C%20%D7%90%D7%A4%D7%A9%D7%A8%20%D7%9C%D7%A9%D7%9E%D7%95%D7%A2%20%D7%A4%D7%A8%D7%98%D7%99%D7%9D%20%D7%A2%D7%9C%20%D7%91%D7%A8%D7%99%D7%AA%20%D7%9E%D7%99%D7%9C%D7%94%2F%D7%98%D7%99%D7%A4%D7%95%D7%9C%20%D7%91%D7%9C%D7%A9%D7%95%D7%9F%20%D7%A7%D7%A9%D7%95%D7%A8%D7%94%3F" target="_blank"><?php echo $button_text; ?> <!--<img src="<?php //echo plugins_url( '../img/wai.svg', __FILE__ ) ?>" style="max-width: 20px; display: inline;" />--></a>
                            </div> 
                        </div> <!-- /screen -->
                        <div class="button">
                        <!-- You can hook the "home button" to some JavaScript events or just remove it -->
                        </div>
                    </div> <!-- /device -->
                </div> <!-- /device-wrapper -->

                <p class="submit"><input type="submit" name="submit" id="submit" class="button button-primary" value="<?php _e('Save Changes', 'add-whatsapp-button') ?>"></p>
            </form>
        </div>

        <script>
            console.log(<?php echo $awb_settings['button_location'] ?>);
        </script>

    <?php
    echo ob_get_clean();
}

add_action('admin_menu', 'awb_options_menu_link');

//register plugin settings
function awb_register_settings() {
    register_setting('awb_settings_group', 'awb_settings', 'awb_validate_inputs');
}

add_action('admin_init', 'awb_register_settings');

Anyone have any idea why the <select> option value does not save to the database?

Answer 1

I printed out the $awb_options array with print_r, and it turns out the value is indeed saved into the database correctly, but the saved value wouldn't display properly.

After re-examining my code I noticed I mixed up $awb_settings (which I used to post the settings to the DB) and $awb_options, which is the variable in the wp_options table that actually holds the array of saved settings. I accidentally called $awb_settings['button_location'] and not $awb_options['button_location'] in the input value. That was my mistake... A stupid one I would agree.