如何将选项卡中的表单控制到选项卡面板中的其他选项卡?
问题描述:
我有选项卡面板。我在选项卡面板的第一个选项卡中有一个表单。我想在第一个选项卡面板中填写表单中的所有内容,并且控件应该转到第二个选项卡。我dnt如何在jQuery中做到这一点。如何将选项卡中的表单控制到选项卡面板中的其他选项卡?
这是标签结构:
<div class="wizard-inner">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">Customer
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> Person
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> Equipment
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4"> Address
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> Cart
</a>
</li>
</ul>
</div>
形式在第一个选项卡:
<form name="customer" id="customer" method="post" action="#step2">
<div class="form-inline">
<div class="pad col-md-6">
<div class="form-group col-md-12">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="fname" placeholder="First Name" required>
</div>
<div class="form-group col-md-12">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" name="lname" placeholder="Last Name" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">Gender</label>
<select name="gender" id="gender" class="dropselectsec1" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">Skill level</label>
<select name="visa_status" id="g" class="r" required>
<option value="">Select Skill level</option>
<option value="df">cv</option>
<option value="df">xc</option>
<option value="df">df</option>
</select>
</div>
<div class="form-group col-md-12 inc">
</div>
</div>
<div class="pad col-md-6">
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fg</label>
<input type="text" class="form-control" name="age" id="exampleInputName" placeholder="Age" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fgf</label>
<input type="text" class="form-control" name="height" id="exampleInputName" placeholder="Height * (cm)" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">fgfg</label>
<input type="text" class="form-control" name="weight" id="exampleInputName" placeholder="Weight * (kg)" required>
</div>
<div class="form-group col-md-12 padd">
<label for="exampleInputEmail1">ffg</label>
<input type="text" class="form-control" name="shoesize" id="exampleInputName" placeholder="Shoe size *" required>
</div>
</div>
<input type="submit" name="save" class="btn btn-primary next-step" value="Continue"/>
</form>
在填写所有详细信息后,我想给控制到第二个选项卡。如何在jQuery中给它?任何人都可以帮我解决这个问题吗?
答
呼叫下面按钮功能点击
function ValidData()
{
var $myForm = $('#customer');
if ($myForm[0].checkValidity()) {
//Activate next tab code goes here
}
return false;
}
答
在每个步骤中提交表单后,加载页面和在javascript设置一个变量,以指示当前步骤。然后使用它来设置正确的选项卡禁用所有选项卡,然后激活正确的选项卡。
因此,像这样:
<?php
// logic to determine current step...
$step = 'step1'; // or 'step2', 'step3', etc
?>
<script>
$(function() {
var current_step = <?php echo $step; ?>;
// reset all li elements under any div that has a "wizard-inner" class
$('div.wizard-inner li').removeClass('active').addClass('disabled');
// set the correct tab as active. you'd have to add an this id to the appropriate DOM element
$('#step1-tab').addClass('active');
})
</script>
<?php
// more php code
?>
这是一个有点不清楚你的实际页面是如何放在一起,因为你还没有公布所有的代码,但是这是一个解决方案的要点。您可能需要将id,名称,数据属性等添加到某些DOM元素,以便通过javascript更轻松地识别和互动。
你想只将表单从tab1移动到tab2? – Sojtin
请检查这个http://jsfiddle.net/Spokey/2aQ2g/54/这个例子将帮助你在上面的例子。 –