CODEWITHSUNDEEP
csshtmltwitter-bootstrapbootstrap-modal
Tim C
Tim C

Reputation: 5714

Bootstrap Modal Open Different Section Of Modal

Consider the following:

I have 2 buttons a Login btn and a Registration Button. When either one of the buttons are clicked a bootstrap modal comes up, with 2 tabs, one for login and one for registration.

My Problem

Regardless if login button or registration button is clicked the modal always opens on the login tab, if user clicks register button I would like the modal to open on the registration tab.

JSFIDDLE LINK, CLICK HERE

Here is a visual example:

  1. Two Buttons, user clicks button Bootstrap Modal Opens

enter image description here

  1. Bootstrap Modal opens on login tab, section

enter image description here

  1. If user clicks Register Button the Modal still opens on the login tab section, I would like this to change, so modal opens on registration tab when register button is clicked

enter image description here

Code Buttons:

<div class="row">
        <div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
            <button type="button" data-toggle="modal" data-target="#myModal" style="cursor:pointer" id="loginBtn">Login</button>        
         </div><!--Columns-->
        <div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
         <!-- I BELIEVE THE PROBLEM IS HERE-->
            <button type="button"  data-toggle="modal" data-target="#myModal#registration" style="cursor:pointer" id="regBtn">Register</button>     
        </div><!--Columns-->
    </div><!--Row-->

Modal Code

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="myModalLabel">
                    Login/Registration 
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#Login" data-toggle="tab">Login</a></li>
                            <li><a href="#Registration" data-toggle="tab">Registration</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <!--LOGIN TAB -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="Login">

      <form class="form-horizontal" role="form" method="post" id="tabLogin" action="includes/loginScript.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <span id="email-info"></span>
      <div class="col-sm-10">
        <input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <span id="pwd-info"></span>
      <div class="col-sm-10">          
        <input type="password" name="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
     <!-- <a href="assets/forgotLoginDetails.php"><span style="color:red;">Forgot Password</span></a>-->
  </form>
    <div id="tabloginMsg"></div>
  <!--**********END LOGIN TAB*************** -->
                            </div>
                            <!--*************START REGISTRATION************************* -->

                            <div class="tab-pane" id="Registration">



 <form name="regForm" class="form-horizontal" role="form" id="regTab" action="includes/classes/class.userRegistration.php" method="post">
  <div class="form-group">
<label class="control-label col-sm-2" for="regName">Name:</label>
 <div class="col-sm-10">
<input type="text" name="userName" required  class="form-control">
</div>
</div>

 <div class="form-group">
<label class="control-label col-sm-2" for="regLastName">Surname:</label>
<div class="col-sm-10">  
<input type="text" name="userSurname" required  class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="regEmail">Email:</label>
 <div class="col-sm-10">     
<input type="email" name="userEmail" required  class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="regPword">Password:</label>
<div class="col-sm-10">   
<input type="password" name="pword1"  class="form-control">
</div>
</div>

 <div class="form-group">
<label class="control-label col-sm-2" for="confRegPword">Confirm Password:</label>
<div class="col-sm-10">   
<input type="password" name="pword2" class="form-control">
</div>
</div>
<div class="form-group">
 <label class="control-label col-sm-2" for="regPhone">Phone:</label>
<div class="col-sm-10">  
<input type="text" name="userPhone" class="form-control">
</div>
</div>

<div  class="form-group">
<div class="col-sm-10">
<button name="submit" class="btn btn-danger" style="font-size:19px" >Register</button>
</div>
</div>
</form>
<div id="tabregMsg"></div>
                            </div>
                        </div>
                        <div id="OR" class="hidden-xs">
                            OR</div>
                    </div>
                    <div class="col-md-4">
                        <div class="row text-center sign-with">
                            <div class="col-md-12">
                                <h4>
                                    Sign in with</h4>
                            </div>
                            <div class="col-md-12">
                                <div class="btn-group btn-group-justified">
                                      <a href="<?php echo $SITE_URL; ?>/fbconfig.php" class="btn btn-primary">Facebook</a> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 2531

Answers (1)

Majid
Majid

Reputation: 2900

You can use jquery to get this approach simply change your css code for TAB to 

 <ul class="nav nav-tabs">
    <li id="loginLi"><a href="#Login" data-toggle="tab">Login</a></li>
    <li id="RegLi"><a href="#Registration" data-toggle="tab">Registration</a></li>
 </ul>

then add this jQuery click action : 

$("#loginBtn").on('click',function(){
     $('#RegLi').removeClass('active');
     $('#loginLi').addClass('active');
})
$("#regBtn").on('click',function(){
      $('#loginLi').removeClass('active');
      $('#RegLi').addClass('active');
})

you may improve this code but it's the idea to select the proper tabs.

see the demo here : https://jsfiddle.net/j4pkru1a/

Upvotes: 1

Related Questions