0

I'm trying to move to the next tab by clicking on a button like "save and continue". I want to create a button to move to the next tab. Every tab contains some text boxes.

When the user fills the last textbox of tab 1 and clicks on the "save and continue" button, I want to display tab2. When the user reachs tab3 I want to hide the "save and continue" button.

How to solve this problem?

Html code is 

<ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2 ">
    <li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="tabs"></i></a></li>
    <li ><a href="#personalinfo-tab" data-toggle="tab">Personal Information <i class="tabs"></i></a></li>
    <li><a href="#address-tab" data-toggle="tab">Address <i class="tabs"></i></a></li>
</ul>

  <div class="margintop"></div>

        <form name="userForm"  class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off">
<div class="tab-content">
        <div class="tab-pane active" id="info-tab">
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="firstName">First Name:</label>
      <div class="col-xs-7">
        <input type="text" required id="firstName" name="firstName" class="form-control" id="firstName"  data-ng-model="credentials.firstName" placeholder="First Name">

      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">Last Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="inputEmail">Email:</label>
      <div class="col-xs-7">
        <input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">User Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name">
      </div>
    </div>
</div>
<div class="tab-pane" id="personalinfo-tab">
             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="gender">Gender:</label>
      <div class="col-xs-6">
        <input type="radio" ng-model="credentials.gender" value="Male" />Male
            <input type="radio" ng-model="credentials.gender" value="Female" />Female
      </div>
    </div>

             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="designation">Designation:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation">
      </div>
    </div>
</div>
    <div class="tab-pane" id="address-tab">
        <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="mobile">Mobile No:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="address">Address:</label>
      <div class="col-xs-7">
        <textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"></textarea>
      </div>
    </div>
         <div style="margin: 15px">
        <div class="form-group">

            <div class="col-xs-offset-3 col-xs-8 ">
               <input type="submit" class="btn btn-primary" data-ng-click="adduser()" value="Create New Associate">
            </div>
        </div>
                 <div data-ng-show="error" class="text-center text-danger">
                    <strong data-ng-bind="error"></strong>
            </div>
    </div>

</div>

    </div>

            <button class="btn btn-small" ng-click="proceed()">save and continue</button>


    </form>


</div>

Javascript code 

$scope.proceed = function() {



};
Improve this question

2 Answers 2

Reset to default
1

Thanks, I got out from this problem by using "href" based on "id"s and script for moving to next tabs.. here is my html file.

my html file:

<ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2">

    <li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="fa"></i></a></li>
    <li ><a href="#personalinfo-tab" data-toggle="tab">Personal Information <i class="fa"></i></a></li>
    <li><a href="#address-tab" data-toggle="tab">Address <i class="fa"></i></a></li>
</ul>


  <div class="margintop"></div>
<!--  <form class="form-horizontal">-->
        <form id="accountForm" name="userForm" data-ng-submit="adduser()" class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off">

<div class="tab-content">
        <div class="tab-pane active" id="info-tab">
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="firstName">First Name:</label>
      <div class="col-xs-7">
        <input type="text" required id="firstName" name="firstName" class="form-control" id="firstName"  data-ng-model="credentials.firstName" placeholder="First Name">

      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">Last Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="inputEmail">Email:</label>
      <div class="col-xs-7">
        <input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="lastName">User Name:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name">
      </div>
    </div>
              <div style="margin: 15px">
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <a style="margin: 15px" href="#personalinfo-tab" class="btn btn-primary nexttab" data-toggle="tab" id="btn-next">Save and Continue</a>
            </div>
        </div>

    </div>

</div>

<div class="tab-pane" id="personalinfo-tab">
             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="gender">Gender:</label>
      <div class="col-xs-6">
        <input type="radio" ng-model="credentials.gender" value="Male" />Male
            <input type="radio" ng-model="credentials.gender" value="Female" />Female
      </div>
    </div>

             <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="designation">Designation:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control"  name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation">
      </div>
    </div>
    <div style="margin: 15px">
     <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <a href="#address-tab" class="btn btn-primary nexttab" id="btn-next" data-toggle="tab">Save and Continue</a>
            </div>
        </div>
        </div>

</div>

    <div class="tab-pane" id="address-tab">
        <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="mobile">Mobile No:</label>
      <div class="col-xs-7">
        <input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-xs-3 col-md-3" for="address">Address:</label>
      <div class="col-xs-7">
        <textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"></textarea>
      </div>
    </div>

              <div style="margin: 15px">
        <div class="form-group">
            <div class="col-xs-offset-3 col-xs-8 ">
               <input type="submit" class="btn btn-primary" value="Create New Associate">
            </div>
        </div>
                 <div data-ng-show="error" class="text-center text-danger">
                    <strong data-ng-bind="error"></strong>
            </div>
    </div>
        </div>
    </div>

    </form>

my script file :: for moving to next tab by clicking on button

<script type="text/javascript">
    $('.nexttab').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I don't know if this is the best way to do it or not, but we do it by setting the active flag and having a list of the tabs. Something like the following.

        <tab active="tabs.tab1"></tab>
        <tab active="tabs.tab2"></tab>
        <tab active="tabs.tab3"></tab>

        $scope.tabs = {tab1:false,tab2:false,tab3:false};

        $scope.buttonClick = function(button) {  // button will be the name of the next tab to become active.
           $scope.tabs[button] = true;
        };
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.