on change form submit variable value not updating

Question

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.

Answer 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();
  });
});