Show Signup modal window then Login modal right away

Question

I have a nav bar with options for signup or login. Once clicked on either it will display a modal window using Bootstrap. What I am trying to do is that when the user is finished with the join modal window (pressed submit button and submitted data to the controller), I want to show the signin modal window right after. Show my idea was when submitting the form data to the controller. The controller would respond back with a display-type equaling "join, signin, nothing" and reinclude the page. In the page it will check what the display-type is then will call either show_join_modal() function if the display-type is signup or call either show_signin_modal() function if the display-type is login.

My idea using JQuery was something like this, Here is code in the startpage.php

<script>
    <?php
            if (isset($display_type))
                if ($display_type == 'signin')
                    echo 'show_signin_modal();';
                else if ($display_type == 'join')
                    echo 'show_join_modal();';
                else
                    ;
    ?>

    function show_signin_modal() {          
        $("#signinModal").modal("show");                    
    }       
    function show_join_modal() {            
        $("#joinModal").modal("show");
    }
    function hide_all_modal() {
        $("#joinModal").modal("hide");
        $("#signinModal").modal("hide");
    }       


</script>

    <div class="container">
    <div class="modal fade" id="joinModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">        
            <div class="modal-content">         
                <div class="modal-body">
                    <form class="form-horizontal" method="post" action="controller.php">
                        <input type='hidden' name='page' value='StartPage'></input>
                        <input type='hidden' name='command' value='Join'></input>
                        <h1>Register</h1>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="username"> Username</label>
                            <div class="col-sm-10"> 
                                <input type="text" name="username" placeholder="Enter username.." required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="password" required> Password</label>
                            <div class="col-sm-10"> 
                                <input name="password" type="password" placeholder="Enter password..">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="email" required> Email</label>
                            <div class="col-sm-10"> 
                                <input type="email"  name="email" placeholder="Enter email..">
                            </div>
                        </div>

                        <div class="form-group">        
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">Submit</button>
                                <button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>                      
                    </form>                 
                </div>          
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="modal fade" id="signinModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">        
            <div class="modal-content">         
                <div class="modal-body">
                    <form class="form-horizontal" method="post" action="controller.php">
                        <input type='hidden' name='page' value='StartPage'></input>
                        <input type='hidden' name='command' value='SignIn'></input>
                        <h1>Login</h1>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="username"> Username</label>
                            <div class="col-sm-10"> 
                                <input type="text" name="username" placeholder="Enter username.." required>
                                <?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-sm-2" for="password"> Password</label>
                            <div class="col-sm-10"> 
                                <input name="password" type="text" placeholder="Enter password.." required>
                                <?php if (!empty($error_msg_username)) echo $error_msg_username; ?>
                            </div>
                        </div>  

                        <div class="form-group">        
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">Submit</button>
                                <button type="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>                      
                    </form>                 
                </div>          
            </div>
        </div>
    </div>
</div>

However, I could not get it to work.

Any ideas. Any sample code? Thanks in advance!

the action = controller.php will send you to a different page, this approach will not work. — comphonia, Nov 11 '18 at 05:43
@Joseph_J So once the form data has been submitted in the signup form. In the controller.php we receive the command signup. Next step is to do database processing(see if user already exists), if user does not exist then we create the user in our database. So at this point since the user succesfully created an account now he must login. We then change the $display_type to 'signin'. Then I was going to send $display_type from the controller.php to the startpage.php by declaring it first and then using 'include('startpage.php')'. — needhelpwithlife, Nov 11 '18 at 08:10

score 0 · Answer 1 · answered Nov 11 '18 at 05:30

Replace this code with the current on your controller.

<script>


    function show_login_modal() {           
        $("#loginModal").modal("show");                 
    }       
    function show_signup_modal() {          
        $("#signupModal").modal("show");
    }
    function hide_all_modal() {
        $("#signupModal").modal("hide");
        $("#loginModal").modal("hide");
    }       


</script>
    <?php
            if (isset($display_type))
                if ($display_type == 'signin')
                    echo '<script type="text/javascript">show_signin_modal();</script>';
                else if ($display_type == 'join')
                    echo '<script type="text/javascript">show_join_modal();</script>';


//echo 'show_join_modal();';
                else
                    ;
    ?>

this code segment is in the mainpage. so there is no point echoing script tags when it is inside script tags. Thanks for reply though. — needhelpwithlife, Nov 11 '18 at 08:17

score 0 · Accepted Answer · answered Nov 11 '18 at 18:16

I found out how to do it with help from "https://codepen.io/elmahdim/details/azVNbN" which he posted on "Bootstrap modal: close current, open new" under username "Mahmoud". So in order to go from the joinModal window to the signinModal window right after the user submits the form on the joinModal window. I updated the submit button in the joinModal window with:

<button type="submit" class="btn btn-default" data-toggle="modal" data-target="#signinModal" data-dismiss="modal">Submit</button>

Show Signup modal window then Login modal right away

2 Answers2