pfam_next_tab

by godhong

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form method="post" id="form1" action=index.html>
    <table>
         <H4 align="center" id="id_tab">
            |<a href="#" class="Chemical"> Chemical </a>|
             <a href="#" class="Crop"> Crop </a>|
             <a href="#" class="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab tab_Chemical" border="0">
        <tr><th><label for="id_wat_hl">Water Column Half life (days):</label></th>
            <td><input type="text" name="wat_hl" id="id_wat_hl" /></td></tr>
    </table>
    <table class="tab tab_Crop" border="0" style="display:none">
        <tr><th><label for="id_zero_height_ref">Zero Height Reference:</label></th>
            <td><input type="text" name="zero_height_ref" id="id_zero_height_ref" /></td></tr>    
    </table>    
    <table class="tab tab_Physical" border="0" style="display:none">
        <tr><th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
            <td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td></tr>
    </table>
    <table align="center">
        <tr><td><input class="back" type="button" value="Back" /></td>
            <td><input class="next" type="button" value="Next" /></td>
            <td><input class="submit" type="submit" value="Submit" /></td></tr>
    </table></form>

JavaScript

$(document).ready(function () {
    var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();

    $('.next').click(function () {
        var tab = $(".tab:visible");

        var valid = true;
        $('input', tab).each(function (i, v) {
            valid = validator.element(v) && valid;
        });

        if (!valid) {
            return;
        }

        if (curr_ind < 2) {
            $(".tab:visible").hide();
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".back").show();
        }
        if (curr_ind == 2) {
            $(".submit").show();
            $(".next").hide();
        }
    });

    $('.back').click(function () {
        if (curr_ind > 0) {
            $(".tab:visible").hide();
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });

    var validator = $('form').validate({
        ignore: 'input[type="button"],input[type="submit"]',
        rules: {
            wat_hl: {
                required: true
            },
            zero_height_ref: {
                required: true
            },
            mas_tras_cof: {
                required: true
            }
        }
    });






});