I have a checkbox in a jsp page, when i clicked that checkbox control goes to 2nd tab(div) i.e.
An imaginary basket is here…
but if i have not checked then control will stay in 1st tab and despite clicking on 2nd tab control will not go to 2nd tab.
Full source code : http://flowplayer.org/tools/demos/tabs/wizard.html
But my requirement is when i checked the checkbox then automatically control will take me to 2nd tab. But here after checking checkbox i have to click on 2nd tab then only i am seeing it’s contents. But i want that after cheking the checkbox present in 1st tab, control will automatically take me to 2nd tab. How can it be done? Please i need help.
I am giving codes:
1. First tab content
2. Second tab content
3. Third content
4. Full source code
First tab code:
<div>
<label>
Username <br />
<input name="username"/>
</label>
<label>
Email <br />
<input name="email"/>
</label>
<label>
<input id="terms" type="checkbox" />
I accept <a href="#">these</a> terms and conditions
</label>
<p>
<button class="next">Next »</button>
</p>
</div>
Second Tab Code:
<div>
<h2>An imaginary basket is here...</h2>
<p>
<button class="prev">« Prev</button>
<button class="next">Next »</button>
</p>
</div>
Third Tab code:
<div>
<h2>An imaginary order is here...</h2>
<p>
<button class="prev">« Prev</button>
</p>
</div>
Full souce code:
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in production
Enjoy!
–>
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css"/>
<style>
accept
I think this will solve your problem,
It has validations on checkboxes to continue with next tabs.
http://flowplayer.org/tools/demos/tabs/wizard.html
/* tab pane styling */
.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
div.panes div {
background:#fff url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x 0 5px;
-background:#fff;
height:172px;
}
div.panes label {
margin-bottom:15px;
display:block;
}
label.error {
color:red;
}
</style>
</head>
<body>
<div id="wizard">
<!-- tabs -->
<ul class="tabs">
<li><a href="#" class="w2">Personal info</a></li>
<li><a href="#" class="w2">Shopping basket</a></li>
<li><a href="#" class="w2">Review order</a></li>
</ul>
<!-- panes -->
<div class="panes">
<div>
<label>
Username <br />
<input name="username"/>
</label>
<label>
Email <br />
<input name="email"/>
</label>
<label>
<input id="terms" type="checkbox" />
I accept <a href="#">these</a> terms and conditions
</label>
<p>
<button class="next">Next »</button>
</p>
</div>
<div>
<h2>An imaginary basket is here...</h2>
<p>
<button class="prev">« Prev</button>
<button class="next">Next »</button>
</p>
</div>
<div>
<h2>An imaginary order is here...</h2>
<p>
<button class="prev">« Prev</button>
</p>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
// get container for the wizard and initialize its exposing
var wizard = $("#wizard").expose({color: '#789', lazy: true});
// enable exposing on the wizard
wizard.click(function() {
$(this).expose().load();
});
// enable tabs that are contained within the wizard
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {
/* now we are inside the onBeforeClick event */
// ensure that the "terms" checkbox is checked.
var terms = $("#terms");
if (index > 0 && !terms.get(0).checked) {
terms.parent().addClass("error");
// when false is returned, the user cannot advance to the next tab
return false;
}
// everything is ok. remove possible red highlight from the terms
terms.parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
// "next tab" button
$("button.next", wizard).click(function() {
api.next();
});
// "previous tab" button
$("button.prev", wizard).click(function() {
api.prev();
});
});
</script>
</body>
</html>
You want to change to the second tab, when the checkbox on the first tab will be checked?
Here an example.
=== UPDATE ===
Now the second tab is disabled, while checkbox isn’t checked:
Here the updated example.