[英]Disable first form and open another form to insert data.. all this i have to do in same page?
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 ! 这是代码.....当我单击第一种形式的提交按钮后成功插入数据时..我希望禁用第一种形式,并且应启用2种形式来插入数据!
Here is a simple way to do so using jquery : 这是使用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
: 首先将第二个表单设置为
display:none
默认情况下display:none
,然后检测第一个表单的提交功能,然后显示第二个表单并使用jQuery Effects - Fading
隐藏第一个表单:
With jQuery you can fade elements in and out of visibility.
使用jQuery,您可以淡入和淡出可见性。
jQuery fadeIn()
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeToggle()
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.