JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<form name="myForm" action="../controller/new.php" method="POST" enctype="multipart/form-data">
    <table align="left" width="300" height="200">
        <tbody>
            <tr>
                <td>Crop Name :</td>
                <td>
                    <input type="text" name="crop_id" value="" size="45" id="crop" onkeyup="checkLetters(this.value);" />
                    <div id="cropEr2" style="display:none;color:red">Enter crop name</div>
                    <div id="cropEr3" style="display:none;color:red">You have to enter only letters.</div>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="button" type="reset" value="Clear Deatils" />
                </td>
                <td>
                    <input type="hidden" name="action" value="add_crop" />
                    <input class="button" id="submit" name="submit" type="submit" value="Add Details" />
                </td>
            </tr>
        </tbody>
    </table>
</form>

JavaScript

$(document).ready(function () {
    $('#submit').click(function (e) {
        var crop = $('#crop').val();

        //Empty crop
        if (crop === "") {
            $('#cropEr2').show();
            return false;
        } else {
            $('#cropEr2').hide();

        }
    });

});