How to reset a multi-tab modal to initial content?

Question

i created a multi-tab modal to handle login and register stuff on my site. Here is the code for the modal:

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="signInModalLabel">Enter the site</h4>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
        <li><a data-toggle="tab" href="#registerTab">Register</a></li>
      </ul>
      <div class="tab-content">
        <div id="loginTab" class="tab-pane fade in active">
          <div class="modal-body">
            <form class="form-horizontal" id="loginForm">
              <div class="form-group">
                <label for="inputUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputUsername"required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputPassword" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="login-error"></p>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p id="forgotPass">Forgot password?</p>
                </div>
              </div>
            </form>

            <form class="form-horizontal" id="forgotPassForm">
              <p>Please fill-in your email address</p>
              <div class="form-group">
                <label for="inputForgotPass" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputForgotPass" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="forgot-error"></p>
                </div>
              </div>
            </form>

          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="loginForm">Login</button>
            <button type="submit" class="btn btn-primary" form="forgotPassForm">Send</button>
          </div> 
        </div>
        <div id="registerTab" class="tab-pane fade">
          <div class="modal-body">
            <form class="form-horizontal" id="registerForm">
              <div class="form-group">
                <label for="inputNewUsername" class="control-label col-xs-2">Username</label>
                <div class="col-xs-10">
                  <input type="text" class="form-control" id="inputNewUsername" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewPassword2" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                  <input type="password" class="form-control" id="inputNewPassword2" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputNewEmail" class="control-label col-xs-2">E-mail</label>
                <div class="col-xs-10">
                  <input type="email" class="form-control" id="inputNewEmail" required>
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                  <p class="text-danger" id="reg-error"></p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" form="registerForm">Register</button>
          </div>              
        </div>
      </div>
    </div>
  </div>
</div>

Here is the modal as it appear the firt time:

Now if users click on "Forgot password" link, it shows this:

Now at this point if users close the modal and the reopen it (without refreshing the page) it shows the forgot password form, instead of the initial one (and there is no way to go back to the login form, except reloading the site). I tried several solution, like this, but it doesn't work. How to fix this?

Thank you in advance.

Answer 1

First of all, I suggest you add a Cancel button to the left of your Send button. Clicking the Cancel button will return to the original login form.

With the Cancel button, the following should work:

$('#signInModal').on('hidden.bs.modal', function() { 
    // reset multi-tab modal to initial state 
    $(this).find('.nav-tabs a:first').tab('show');
    $('#cancelBtnId').click();    
}) ;

Try it and let us know :-)

Answer 2

Bootstrap modal has some events. One of these is hide.bs.modal which is fired immediately when the hide instance method has been called. So you can try something like this:

$("#signInModal").on("hide.bs.modal", function () {
    $("#signInModal .loginForm").show();
    $("#signInModal .forgotPassForm").hide();
});