on submit click button hide first tab and show next tab?

Question

we having three tabs initially first tabs should enabled i's working fine. after click submit button second tab should be open but it's is not working.

<div class="page-content">
    <div class="container-fluid">
        <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>Company Registration Form</h2>
                    </div>
                </div>
            </div>
        </header>

            <section class="tabs-section">
                <div class="tabs-section-nav tabs-section-nav-icons">
                    <div class="tbl">
                        <ul class="nav" role="tablist" id="myLinks">
                            <li class="nav-item">
                                <a class="nav-link active" href="#home" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="font-icon font-icon-cogwheel"></i>
                                        Company Registration Form
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <span class="glyphicon glyphicon-music"></span>
                                        Company Social Network
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="fa fa-product-hunt"></i>
                                        Company Reference
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div><!--.tabs-section-nav-->
                <div class="tab-content" id="myTabs">
                    <div role="tabpanel" class="tab-pane fade in active show" id="home">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu1">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="menu2">
                        <form id="form" action="">
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox"> Remember me</label>
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div><!--.tab-pane-->
                </div><!--.tab-content-->
            </section>


    </div>
</div>

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#myTabs form").on('submit', function (e) {
        e.preventDefault();
        var linkHref = $(this).parents('.tab-pane').attr('id');
        $('#myLinks li')
              .find('a[href="#' + linkHref + '"]')
          .parent()
          .next()
          .find('a').tab('show')
          .attr('data-toggle', 'tab');
    });
</script>

Pass the value

in this picture value pass to the linkHref but after click submit button hide the first tab but next tab is not opening ..

Second Image blank page

second screen shot blank page after enter submit button

Answer 1

Here you go with a solution https://jsfiddle.net/7baqxro0/1/

 $("#myTabs form").on('submit', function (e) { e.preventDefault(); var linkHref = $(this).parents('.tab-pane').attr('id'); $('#myLinks li a').removeClass('active'); $('#myLinks li') .find('a[href="#' + linkHref + '"]') .parent() .next() .find('a') .tab('show') .addClass('active') .attr('data-toggle', 'tab'); $('a.nav-link').not('.active').css('pointer-events', 'none'); }); $('a.nav-link').not('.active').css('pointer-events', 'none'); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="page-content"> <div class="container-fluid"> <header class="section-header"> <div class="tbl"> <div class="tbl-row"> <div class="tbl-cell"> <h2>Company Registration Form</h2> </div> </div> </div> </header> <section class="tabs-section"> <div class="tabs-section-nav tabs-section-nav-icons"> <div class="tbl"> <ul class="nav nav-tabs" role="tablist" id="myLinks"> <li class="nav-item"> <a class="nav-link active" href="#home" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="font-icon font-icon-cogwheel"></i> Company Registration Form </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu1" role="tab" data-toggle="tab"> <span class="nav-link-in"> <span class="glyphicon glyphicon-music"></span> Company Social Network </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu2" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="fa fa-product-hunt"></i> Company Reference </span> </a> </li> </ul> </div> </div><!--.tabs-section-nav--> <div class="tab-content" id="myTabs"> <div role="tabpanel" class="tab-pane fade in active show" id="home"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu1"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu2"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> </div><!--.tab-content--> </section> </div> </div> 

Please add your CSS to the code, intentionally I skipped it.

I've used CSS property pointer-events: none instead of disabled.

Hope this will help you.

Answer 2

working: https://jsfiddle.net/q6adcnLs/

1. you have multiple elements with same id attribute
2. you've misplaced .active class to .nav-link (which should be in the .nav-item )
3. you can use return true or return false instead of preventDefault()

UPDATE:

disable other inactive tabs https://jsfiddle.net/q6adcnLs/1/