JSFiddle - React, Tailwind, and code Playground

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="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab_Chemical" border="0" style="display:none">
        <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>
        <tr><th><label for="id_wat_t">@Temperature (&#8451):</label></th>
            <td><input type="text" name="wat_t" value="20" id="id_wat_t" /></td></tr>
    </table>
    <table class="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" value="1e-08" id="id_mas_tras_cof" /></td></tr>
        <tr><th><label for="id_leak">Leakage (m/d):</label></th>
            <td><input type="text" name="leak" value="0" id="id_leak" /></td></tr>
    </table>
    <table align="center">
        <tr><td><input type="submit" value="Submit"><input type="reset" value="Reset"></td></tr>
</form>

JavaScript

$(document).ready(function () {
    $('.Chemical').click(function () {
        $('table[class^="tab_"]').hide();
        $(".tab_Chemical").slideToggle();
    });
    $('.Physical').click(function () {
        $('table[class^="tab_"]').hide();
        $(".tab_Physical").slideToggle();
    });


    $("#form1").validate({
        submitHandler: function (form) {
            SubmittingForm();
            alert("submitted");

        },
        rules: {
            wat_hl: "required"
        }
    })
})