1

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 &raquo;</button>
        </p>

    </div>

Second Tab Code:

<div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

Third Tab code:

<div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; 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 &raquo;</button>
        </p>

    </div>

    <div>
        <h2>An imaginary basket is here...</h2>

        <p>
            <button class="prev">&laquo; Prev</button>
            <button class="next">Next &raquo;</button>
        </p>
    </div>

    <div>
        <h2>An imaginary order is here...</h2>

        <p>
            <button class="prev">&laquo; 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>
Improve this question

2 Answers 2

Reset to default
2

You want to change to the second tab, when the checkbox on the first tab will be checked?

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // select tab 1
        $('#wizard').tabs('select', 1);
    }
});

Here an example.

=== UPDATE ===

Now the second tab is disabled, while checkbox isn't checked:

$('#wizard').tabs({ disabled: [1] });

// when checkbox is clicked
$('#terms').click(function() {
    // is checkbox checked
    if ($(this).is(':checked')) {
        // enable tab 1
        $('#wizard').tabs('enable', 1);
        // select tab 1
        $('#wizard').tabs('select', 1);
    } else {
        // disable tab 1
        $('#wizard').tabs('disable', 1);
    }
});

Here the updated example.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

ok will it work? But i have not provided any id for 2nd div, should i give any id for 2nd div?
2nd div? For the tab? For tab selecting you don't need an id. The second parameter is the number of the tab (starting with 0).
ya but without checking the checkbox in first tab i am viewing contents of second tab which is not allowed. I will see the content of 2nd tab only after checking the checkbox in first tab. When i am checking the checkbox in first tab then only i can view the content of 2nd tab else 2nd tab ought to be kept in disable mode. I think slight modification is required in your fiddle, please edit and show me..please i need it.
thanks a lot scessor...i got it. I have just another problem.Total 3 tabs are present. Two checkboxes are present in first tab, when i checked first checkbox then control will take me to 2nd tab and if i checked 2nd checkbox then control will take me to 3rd tab. But initially first tab is enabled and other two tabs are disabled. How can it be achieved scessor? If you can show me by a fiddle then i will remain grateful to you. Actually I am new to this field hence learning.
This example demonstrates the emptying of a textarea after disabling a tab.
|
1 
// "next tab" button
$("#terms").click(function() {
   if ( this.checked === true)
       api.next();
});

put this code just after 

// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");

it handles click event on the terms checkbox, and if it's checked, go to the next tab.

Improve this answer

1 Comment

ok if i have two checkboxes in 1st div then i want to go to two different divs/tabs by checking these 2 check boxes i.e. if first checkbox is checked then control will go to 2nd tab and if second checkbox having id terms2 is checked then control will go to 3rd tab. Is there any way to achieve this?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.