How can I submit a form withing processing the submission of another form?

Question

I have a total of 3 forms on the page. Two are designed for user input, the 3rd one is the form that actually needs to be submitted.

Form 1 is the usual login form with username and password. The form gets submitted and checked for validity (javascript and PHP). If all checks out (ie username and password matches what is in the MySQL DB), then the username and the password are populated into the 3rd form for submission. If the username does exist but it's a new account, the user is redirected to form 2. ie form 1 is hidden and form 2 is shown.

Form 2: Once the new password is entered, confirmed and validated, the username and new password are passed on the 3rd form for submission.

Form 3 is where the magic is supposed to take place. It's the most basic form you can think of.

And it gets submitted from the processing of form 1 or 2 for which I intercepted the onsubmit.

That 3rd form is perform a form based authentication in Apache.

If I use the form on it's own from the web page, it gets submitted and I'm redirected to the protected page as expected. If I submit the page from the code, the web page gets reloaded but the redirection is never happening. In fact, the authentication is not working either.

I've tried to process the server side login process via PHP but it fails because I'm using the form based authentication and the PHP server login process is for basic or digest authentication.

I tried to create the 3rd form dynamically as well as manually but there is just no processing occurring. The submit is called because the page reloads but that's it.

Environment Ubuntu 16.04 Apache with form based authentication MySQL for the user database PHP for the code behind Javascript/jQuery for the client side coding

Striped down version of the forms:

Form 1:

<form class="validate-form" method="post" name="loginform">
    <input type="hidden" name="formname" value="login">
    <input type="text" name="login_username" placeholder="Username">
    <input type="password" name="login_password" placeholder="Password">
    <button>Login</button>
</form>

Form 2:

<form class="validate-form" method="post" name="changepasswd" style="display:none;">
    <input type="hidden" name="formname" value="reset">
    <input type="password" name="new_password" placeholder="New Password">
    <input type="password" name="confirm_password" placeholder="Confirm Password">
    <button>Reset password and Login</button>
</form>

Form 3:

<form method="POST" action="" name="submit_form" style="display:none;">
    <input name="httpd_username">
    <input name="httpd_password">
    <button>Login</button>
</form>

Form processing:

$('.validate-form').on('submit',function(){
    var workform = 'loginform';
    var check = true;
    if ($('form[name=resetform]').is(":visible")) workform = 'resetform'; 

    // Validating the entries (not empty, format,...)
    //...
    if (check) {
        if (workform == 'loginform') { //Processing Form 1
        //send to PHP for processing
        //...
            var response = xhreq.responseText.trim().split(":");
            // The response looks like i:information or w:warning or e:error message
            var success = true;
            switch (response[0]) {
                case 'i':
                //username and password checks out against the database,
                //now populating form 3 for submission:     
                    $('input[name=httpd_username]').val($('input[name=login_username]').val().trim());
                    $('input[name=httpd_password]').val($('input[name=login_password]').val().trim());
                    $('form[name=submit_form]').submit(); // and submitting the form
                    break;
                case 'w': // showing for 2 and hiding for 1 to change the Password
                    success = false;
                    break;
                case 'e': // error processing
                    success = false;
                    break;
                default:
                    success = false;
                }
                return success;
            } else { //Processing Form 2
                //send to PHP for processing
                //...
                var response = xhreq.responseText.trim().split(":");
                // same response format as for form 1
                var success = true;
                switch (response[0]) {
                    case 'i':
                        $('input[name=httpd_username]').val($('input[name=login_username]').val().trim());
                        $('input[name=httpd_password]').val($('input[name=new_password]').val().trim());
                        $('form[name=submit_form]').submit();
                        break;
                    case 'w':
                        alert(response[1]);
                        success = false;
                        break;
                    case 'e': // error processing
                        success = false;
                        break;
                    default:
                        success = false;
                    }
                    return success;
                }
            } else { //form 1 or 2 validation failed
                return false;
            }
        });

Expected result: form 3 gets submitted and I'm redirected to the restricted page

Actual result: form 3 gets submitted, the authentication did NOT take place, access to the restricted page is still refused.

Answer 1

Fixed!

I was returning false when the login credentials were not as expected for one reason or another and true when the credentials checked out on the server side response[0]='i'

When setting the return to false all the time, the login process on form 3 DOES take place.

My validation function for form 1 & 2 then becomes:

$('.validate-form').on('submit',function(){
    var workform = 'loginform';
    var check = true;
    if ($('form[name=resetform]').is(":visible")) workform = 'resetform'; 

    // Validating the entries (not empty, format,...)
    //...
    if (check) {
        if (workform == 'loginform') { //Processing Form 1
        //send to PHP for processing
        //...
            var response = xhreq.responseText.trim().split(":");
            // The response looks like i:information or w:warning or e:error message

            switch (response[0]) {
                case 'i':
                //username and password checks out against the database,
                //now populating form 3 for submission:     
                    $('input[name=httpd_username]').val($('input[name=login_username]').val().trim());
                    $('input[name=httpd_password]').val($('input[name=login_password]').val().trim());
                    $('form[name=submit_form]').submit(); // and submitting the form
                    break;
                case 'w': // showing for 2 and hiding for 1 to change the Password

                    break;
                case 'e': // error processing

                    break;
                default:

                }
                return false;
            } else { //Processing Form 2
                //send to PHP for processing
                //...
                var response = xhreq.responseText.trim().split(":");
                // same response format as for form 1

                switch (response[0]) {
                    case 'i':
                        $('input[name=httpd_username]').val($('input[name=login_username]').val().trim());
                        $('input[name=httpd_password]').val($('input[name=new_password]').val().trim());
                        $('form[name=submit_form]').submit();
                        break;
                    case 'w':
                        alert(response[1]);

                        break;
                    case 'e': // error processing

                        break;
                    default:

                    }
                    return false;
                }
            } else { //form 1 or 2 validation failed
                return false;
            }
        });