on change form submit variable value not updating

I try to make custom theme option, a switch select option can change $bannerchange value. but i cannot add/update value of $bannerchange, select option inside a form. working fine with submit button but come to onchange="this.form.submit() the select option not changing.

<?php
if(isset($_POST['wphw_submit'])){
        wphw_opt();
}
function wphw_opt(){
    $bannerchange = $_POST['bannerchange'];
    if( get_option('bannerchange') != $bannerchange) {
        $chk = update_option( 'bannerchange', $bannerchange);
    }
}?>
  <form method="post" action="">         
   
        <select name="bannerchange" onchange="this.form.submit()">
            <option value="page1"<?php if (get_option('bannerchange') == "page1") { echo " selected"; } ?>>Custom Departure</option>
            <option value="page2"<?php if (get_option('bannerchange')  == "page2") { echo " selected"; } ?>>Fixed Departure</option>
        </select>
        <input type="submit" name="wphw_submit" value="Save changes" class="button-primary" />
  </form><?php 
switch ($bannerchange) { 
    case 'page2': 
        break;
    case 'page1':
        break; 
}

$bannerchange get always undefined. I can debug this problem with straight way? any help greatly appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I fixed myself we can submit a form by triggering submit button click event:

jQuery(document).ready(function() {
  jQuery('#bannerchange').on('change', function() {
    var $form = jQuery(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0