在错误PHP时停止引导注册表格从切换到登录

Question

At the moment I have this bootstrap login form which when you click Sign Up it switches to the sign up form. I've implemented the code for signing up in php along side some validation in PHP using $_POST to check to see if the fields are filled in and passwords match etc however, each time I submit the sign up for it switches back to the login form on the same page however, I want to it to remain on the sign up form if any of the validations fail. How would I go about doing this as simply changing the action="" in the form doesn't work. Here's the code for the bootrstrap login and sign up.

  <div class="container">    
              <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
                  <div class="panel panel-info" >
                         <div class="panel-heading">
                         <div class="panel-title">Sign In</div>
                           <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
                        </div>     

                  <div style="padding-top:30px" class="panel-body" >

                      <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

                      <form action="login.php" method="post" id="loginform" class="form-horizontal" role="form">

                          <h5 style="margin-top: 0px"><b>To place an order, please sign in.</b></h5>
                            <div id="error"></div>
                            <br>
                          <div style="margin-bottom: 25px" class="input-group">
                                     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                      <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">                                        
                                </div>

                          <div style="margin-bottom: 25px" class="input-group">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                                </div>



                          <div class="input-group">
                                  <div class="checkbox">
                                    <label>
                                      <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
                                    </label>
                                  </div>
                                </div>


                             <div style="margin-top:10px" class="form-group">
                                <!-- Button -->

                                  <div class="col-sm-12 controls">
                                    <p><input id="btn-login" class="btn btn-success" type="submit" name="submit" value="Login" /></p>
                                    <input type="hidden" name="submitted" value="TRUE" />

                                </div>
                            </div>


                              <div class="form-group">
                                  <div class="col-md-12 control">
                                      <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
                                          Don't have an account! 
                                      <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
                                         Sign Up Here
                                      </a>
                                      </div>
                                   </div>
                            </div>  

                          </form>     



                    </div>                     
                </div>  
      </div>
        <div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                  <div class="panel panel-info">
                    <div class="panel-heading">
                           <div class="panel-title">Sign Up</div>
                          <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
                      </div>  
                      <div class="panel-body" >
                          <form  action="" method="post" id="signupform" class="form-horizontal" role="form">
                              <div id="errorRegistration"></div> 
                              <div id="signupalert" style="display:none" class="alert alert-danger">
                                  <p>Error:</p>
                                  <span></span>
                              </div>


                               <div class="form-group">
                                  <label for="username" class="col-md-3 control-label">Username</label>
                                  <div class="col-md-9">
                                      <input type="text" class="form-control" name="newusername" placeholder="Username">
                                  </div>
                              </div> 
                              <div class="form-group">
                                  <label for="email" class="col-md-3 control-label">Email</label>
                                  <div class="col-md-9">
                                    <input type="text" class="form-control" name="newemail" placeholder="Email Address">
                                  </div>
                              </div>
                                <div class="form-group">
                                <label for="password" class="col-md-3 control-label">Password</label>
                                <div class="col-md-9">
                                    <input type="password" class="form-control" name="newpassword" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="confirm-password" class="col-md-3 control-label">Confirm Password</label>
                                <div class="col-md-9">
                                    <input type="password" class="form-control" name="newconfirm-password" placeholder="Confirm Password">
                                </div>
                            </div>    
                            <div class="form-group">
                                <label for="forename" class="col-md-3 control-label">Forename</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" name="forename" placeholder="Forename">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="surname" class="col-md-3 control-label">Surname</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" name="surname" placeholder="Surname">

                            <div class="form-group">
                                <!-- Button -->                                        
                                <div class="col-md-offset-3 col-md-9">
                                    <p><input id="btn-signup" class="btn btn-info" type="submit" name="submittedRegister" value="&nbsp Sign Up" /></p>
                                  <input type="hidden" name="submittedRegister" value="TRUE" />
                                </div>
                            </div>

                        </form>
                     </div>
                </div>




     </div> 
</div>

Thanks again for the help! :D

Answer 1

There are many ways to do this, but a simple one would be something like this:

<div id="signupbox" style="<? if (empty($_POST['submittedRegister'])) echo 'display: none;' ?> margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

(And a modified version for #loginbox)

However, I don't recommend to use style attributes, if you can use classes. It might be easier, but classes help keeping the code clean and maintainable