Disable first form and open another form to insert data.. all this i have to do in same page?

Question

Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?

        <section class="content">
    <div class="container-fluid">
        <div class="block-header">
            <h2>
                <!-- JQUERY DATATABLES
                <small>Taken from <a href="https://datatables.net/" target="_blank">datatables.net</a></small> -->
            </h2>
        </div>
        <!-- Basic Examples -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2>
                            Add Amigo
                        </h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li><a href="javascript:void(0);">Action</a></li>
                                    <li><a href="javascript:void(0);">Another action</a></li>
                                    <li><a href="javascript:void(0);">Something else here</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="body">


                        <!-- last row -->
                        <div class="row">                              
                            <div class="col-sm-12">
                                <div class="col-lg-4 col-md-4">
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input type="text" class="form-control date" placeholder="City Id" id="city_id">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4">
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input type="text" class="form-control date" placeholder="Country Id" id="country_id">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end of last row -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-lg-4 col-md-4">
                                    <button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
                                </div>
                            </div>
                        </div>


                    </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

here is the another section of same page

<section class="content">
    <div class="container-fluid">
        <div class="block-header">
            <h2>
                <!-- JQUERY DATATABLES
                <small>Taken from <a href="https://datatables.net/" target="_blank">datatables.net</a></small> -->
            </h2>
        </div>
        <!-- Basic Examples -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2>
                            Add Amigo
                        </h2>
                        <ul class="header-dropdown m-r--5">
                            <li class="dropdown">
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <ul class="dropdown-menu pull-right">
                                    <li><a href="javascript:void(0);">Action</a></li>
                                    <li><a href="javascript:void(0);">Another action</a></li>
                                    <li><a href="javascript:void(0);">Something else here</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="body">


                        <!-- last row -->
                        <div class="row">                              
                            <div class="col-sm-12">
                                <div class="col-lg-4 col-md-4">
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input type="text" class="form-control date" placeholder="City Id" id="city_id">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4">
                                   <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="material-icons">person</i>
                                        </span>
                                        <div class="form-line">
                                            <input type="text" class="form-control date" placeholder="Country Id" id="country_id">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end of last row -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-lg-4 col-md-4">
                                    <button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
                                </div>
                            </div>
                        </div>


                    </div>


                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !

Answer 1

Here is a simple way to do so using jquery :

First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :

With jQuery you can fade elements in and out of visibility.

jQuery fadeIn()

jQuery fadeOut()

jQuery fadeToggle()

jQuery fadeTo()

 $(function(){ $('#first button').on('click',function(){ /* your code */ $('#first').css('pointer-events','none'); $('#second').fadeIn(); }); $('#second button').on('click',function(){ /* your code */ $('#second').css('pointer-events','none'); $('#first').fadeIn(); }) }) 

 section { Width:100%; height:200px; } #first { background-color:blue; } #second{ background-color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <section id="first"> <div> <button>Submit</button> </div> </section> <section id="second" style="display:none"> <div> <button>Submit</button> </div> </section>