Open Webpage Section/Tab on Form Submit / page reload

Question

I am using a bootstrap theme and am trying to get my page's form to stay on/open the specific registration form's confirm message. Unfortunately with several Registration Forms on the page, each is "hidden" inside it's own hidden div/tab. I am not too good with JS and have spent about 4 hours so far trying to get this to function properly:

http://middlechambersociety.com/dev/mcs2014/

On any Registration Form completion I want the user to be brought back to and shown that Registration Form's Confirmation Message AND the "Pay with Card" button when it is part of the reg process (the button currently shows when it should). However, the problem is that when my form reloads the best i can do is bring users to the Registration Section and show the Golfer's Reg Form and/or Confirm message only (because it is the default open div/tab). I have tried php and limited JS/jQuery with no success. I have tried adding Class .active to the li i want to display but no luck. I currently have the following trying to fire on each form when submitted to TRY to get the appropriate registration tab to display:

<?php
if ($reg_type == 'Diners' && !empty($confirm_msg)) {
?>
<script type="text/javascript">
alert('Working1');
$(document).ready(function() {
alert('Working');
var tab = $('#reg_diner').parent();
alert(tab);
tab.addClass('active').siblings().removeClass('active');
});
</script>
<?php
echo '<div class="confirm-message">' . $confirm_msg . '</div>';
echo $stripe_pay_form;
}
?>

please help.

For anyone who may be confused as to what i am looking to accomplish: feel free to complete one of the forms (Dining for instance) and see that the confirm message is hidden until you PHYSICALLY navigate back to the Dining registration tab.

Answer 1

I understand not wanted to navigate user to a different page but sometimes it is just much easier. One way though would be to put a $_GET string in the form post then use that to control the display message. Add it to the form action url maybe:

enter code here action="index.php?form=golfer1"

Then update your code :

 <?php

    if ($_GET['form'] == 'golfer1') {

        echo '<div class="confirm-message">' . $confirm_msg . '</div>';
        echo $stripe_pay_form;
    }

    ?>

Answer 2

Maybe try an ajax call and on success add active class to new content?

My bad - misunderstood. Heres where I can see your error:

In console.log You've got an $ reference error at your script calling point. Cause you load jQuery in footer. So it cant use scripts before it load fully. (Document Ready doesn't work because he doesn't know this command yet) Put jQuery into head, or your tag after calling jQuery