I have been facing challenges with Ajax, so I decided to switch to using plain JavaScript instead. My goal is to create a button on a banner that will allow me to toggle between two pre-existing CSS files to change the style of the page. I already have a form in another PHP file where I can select the desired style and submit it to update the style across the plugin. I am considering implementing this functionality using a POST request.

Below is the code for my form:

/**
 * This class handles the display of settings content
 */
class WoosterPartnerSettings
{
    public function __construct()
    {
        if (get_option('partner_license') && get_option('partner_license') != '') {
            add_action('tab_content_settings', array($this, 'wooster_partner_settings'));
            add_action('admin_init', array($this, 'display_style'));
            add_action('admin_enqueue_scripts', array($this, 'enqueue_style'));
        }
    }

    public function wooster_partner_settings()
    {
?>
        <div class="wrap">
            <h1><?php echo __('Wooster Settings', 'wooster-partner'); ?></h1>
            <hr class="line">

            <form method="post" action="options.php">
                <?php settings_fields('wooster-settings-group'); ?>
                <?php do_settings_sections('wooster-settings-group'); ?>

                <p class="parag"><?php echo __('The Wooster Companion plugin offers two display styles:', 'wooster-partner'); ?></p>

                <label for="style_wordpress">
                    <input type="radio" id="style_wordpress" name="wooster_style" value="companion-wp.css" <?php checked(get_option('wooster_style'), 'companion-wp.css'); ?>>
                    <?php echo __('WordPress Style', 'wooster-partner'); ?>
                </label>

                <label for="style_wooster">
                    <input type="radio" id="style_wooster" name="wooster_style" value="companion-wooster.css" <?php checked(get_option('wooster_style'), 'companion-wooster.css'); ?>>
                    <?php echo __('Wooster Style', 'wooster-partner'); ?>
                </label><br>

                <input type="submit" class="wooster-button" value="<?php echo __('Save Changes', 'wooster-partner') ?>">
            </form>
        </div>
<?php
    }


    public function display_style()
    {
        register_setting('wooster-settings-group', 'wooster_style');
    }

    public function enqueue_style()
    {
        if (is_admin()) {
            if (isset($_GET['page']) && strpos($_GET['page'], 'wooster') === 0) {
                $selected_style = get_option('wooster_style', 'companion-wp.css'); // default style
                wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
            }
        }
    }
}
new WoosterPartnerSettings();

And here is the code for the banner that will be added to all the plugins:

if (!class_exists('WoosterBanner')) {
    class WoosterBanner
    {
        public function __construct()
        {
            if (isset($_GET['page']) && in_array($_GET['page'], ['wooster','wooster-followup','wooster-licenses','wooster-companion','wooster-customers','wooster-partner','wooster-settings','wooster-setup']) && is_admin()) {
                add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
                add_action('in_admin_header', array($this, 'wooster_header_section'));
                 add_action('wp_ajax_switch_css', array($this, 'switch_css')); // request when the user is logged in
            }
        }

        public function wooster_header_section() {
            ?>
            <div id="top-bar-banner">
            <div class="wooster-banner">
            <div class="logo">
                <img src="<?php echo plugins_url('assets/img/logo.avif', __DIR__); ?>" alt="Logo">
            </div>
            <div class="actions">
                <form method="post" action="options.php" id="form">
            <?php settings_fields('wooster-settings-group'); ?>
            <button type="button" id="wooster-exchange-button" class="button">
                <i class="fas fa-exchange-alt"></i>
            </button>
        </form>
        <a href="#" class="button"><i class="fas fa-question-circle"></i></a>
    </div>
</div>
</div>
</div>
<?php
        }



        public function switch_css() {

            $style = isset($_POST['style']) ? $_POST['style'] : '';
            
            if ($style === 'wooster-custom-style-css') {
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/companion-wooster.css', __FILE__);
            } elseif ($style === 'csspartner-css') {
                setcookie('selected_style', $style, time() + 3600, COOKIEPATH, COOKIE_DOMAIN);
                echo plugins_url('assets/css/companion-wp.css', __FILE__);
            }

            exit;
        }

        public function enqueue_styles() {
            wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
            wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');

            wp_enqueue_script('jquery');
            wp_enqueue_script('wooster-banner', plugins_url('assets/js/banner.js', __DIR__), array('jquery'), null, true);


        }
    }
    new WoosterBanner();

}

    var currentStyle = 'style_wordpress';

    document.getElementById("wooster-exchange-button").addEventListener("click", function() {
        var style1 = document.getElementById('style_wordpress');
        var style2 = document.getElementById('style_wooster');

        if (currentStyle === 'style_wordpress') {
            style1.disabled = true;
            style2.disabled = false;
            currentStyle = 'style_wooster';
        } else {
            style1.disabled = false;
            style2.disabled = true;
            currentStyle = 'style_wordpress';
        }
    });
});
 ``