On form change send to url with jQuery

Question

I want to add an action to the form on change so that when you select an option in the form you go to the url I have set in my JS with that parameter selected in the option.

In the below code I have two alerts, these both get the desired url. And they even take me to a page where the url seems to be ok, but the content doesn't seem to load.
If my url is: http://www.example.com/index.php?a=108&tg=2 in the browser, after I select the form it functions as if I only have http://www.example.com/index.php. See fiddle

    <div id="myID">108</div>
    <form class="aclass" target="_blank" method="post">
        <select>
            <option value="1">aaa</option>
            <option value="2">bbb</option>
        </select>
    </form>

    <script>
    var pageurl = window.location.protocol + "//" + window.location.host + window.location.pathname;
    var myID = jQuery('#myID').html() || '';
    var myURL = '?a=' + myID + '&tg=';
    jQuery('.aclass select').change(function () {
        var opVal = jQuery(this).val() || 0;
        var finalURL = pageurl + myURL + opVal;
        alert(finalURL);
        jQuery(this).closest(".aclass").attr("action", finalURL);
        alert(jQuery(this).closest(".aclass").attr('action'));
        this.form.submit();
    });
    </script>

What am I doing wrong here how can I actually get to have http://www.example.com/index.php?a=108&tg=2 from my form?

Answer 1

If you need to submit the form using POST, then the actual querystring as they're processed as GET variables. You can create hidden input fields and add them to the form prior to submission to receive those variables as POST variables.

Answer 2

var pageurl = <?php  echo $_SERVER['PHP_SELF']; ?>;
var myID = jQuery('#myID').html() || '';
var myURL = '?a=' + myID + '&tg=';
jQuery('.aclass select').change(function () {
    var opVal = jQuery(this).val() || 0;
    alert(opVal);
    var finalURL = pageurl + myURL + opVal;
    alert(finalURL);
    jQuery(this).closest(".aclass").attr("action", finalURL);
    alert(jQuery(this).closest(".aclass").attr('action'));
    this.form.submit();
});

Please try this