JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<div id="content">
    <div id="welcome">Welcome&nbsp;&nbsp; Temp</div>
    <div id="dialog" class="dialog" title="Water Quality Data Entry">
        <hr class="noscreen" />
        <form id="eff_entry" name="eff_entry" action="">
            <fieldset>
                <div id="rawdata">
                    <legend>Water Quality Parameters</legend>
                    <label for="usin">USIN</label>
                    <input name="usin" id="usin" type="text" class="usin" required />
                    <br />
                    <br/>
                    <label for="ph">pH</label>
                    <input name="ph" id="ph" value='0.0' required />
                    <label for="conductivity">Conductivity</label>
                    <input name="conductivity" id="conductivity" value='0.0' required />
                    <br />
                    <label for="tds">TDS</label>
                    <input name="tds" id="tds" value='0.0' required/>
                    <br/>
                    <label for="turbidity">Turbidity</label>
                    <input name="turbidity" id="turbidity" value='0.0' required />
                    <br/>
                    <label for="chloride">Chloride</label>
                    <input name="chloride" id="chloride" value='0.0' required />
                    <br/>
                    <label for="alkalinity">Alkalinity</label>
                    <input name="alkalinity" id="alkalinity" value='0.0' required />
                    <br />
                    <label for="hardness">Hardness</label>
                    <input name="hardness" id="hardness" value='0.0' required/>
                    <label for="user">Data Entered By</label>
                  ...

JavaScript

jQuery.noConflict();
jQuery.validator.setDefaults({
    submitHandler: function () {
        var usin = jQuery('#usin').val();
        var user = jQuery('#user').val();
        var ph = jQuery('#ph').val();
        var conductivity = jQuery('#conductivity').val();
        var hardness = jQuery('#hardness').val();
        var tds = jQuery('#tds').val();
        var turbidity = jQuery('#turbidity').val();
        var alkalinity = jQuery('#alkalinity').val();
        var chloride = jQuery('#chloride').val();
        jQuery('#dialog-message').dialog('open');
        return false;
        jQuery.post("scripts/water_qual_add.php", {
            "usin": usin,
                "user": user,
                "ph": ph,
                "conductivity": conductivity,
                "hardness": hardness,
                "tds": tds,
                "turbidity": turbidity,
                "alkalinity": alkalinity,
                "chloride": chloride
        }, function (data) {
            jQuery('#dialog').dialog('open');
            return false;
            jQuery('#eff_entry').each(function () {
                this.reset();
            });
            //jQuery('#usin').focus();
        });
    }
});

jQuery(document).ready(function () {
    jQuery("#dialog-message").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function () {
                jQuery(this).dialog("close");
                jQuery('#usin').focus();
            }
        }
    });

    jQuery("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd-mm-yy",
        altFormat: "yy-mm-dd",
        altField: "#stddate"
    });
    jQuery('#usin').focus();
    jQuery("#eff_entry").validate();
    jQuery("#usin").change(function () {
        var usin = jQuery('[name="usin"]').val();
        jQuery.post("get_sample_details.php", {
            "usin": usin
        }, function (data) {
            if (data.msg) {
                //...