JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<fieldset>
    <legend><strong><font color="White"> Create Member </font></strong></legend>
    <form action="AddMember"  >
        <table cellspacing="10">
            
            <tr>
                <!--  generating ID number  -->
                
                <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member ID</label></font>&nbsp;</td>
                <td colspan="4"></td>
            </tr>
            
            <!--Selecting MemberType-->
            <tr>
                <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member Type</label></font>&nbsp;</td>
                <td colspan="4"><select name="memt" id="t" style="width: 290px">
                    <option value="select">Select Member Type</option>
                    <option value="N">Normal Member</option>
                    <option value="S">Silver Member</option>
                    <option value="G">Gold   Member</option></select>
                </td>
            </tr>
            <!--MemberType Fees-->
            <tr>
                <td style="width: 200px" >&nbsp;&nbsp;<font color="White" ><label>Member Fees</label></font>&nbsp;</td>
                <td colspan="4"><input type="text" id="f" name="fees" style="width: 290px"  placeholder="Member Fee" readonly/></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="reset" value="Reset" style="width: 74px ; background-color:transparent ;color:white" /></td>
                    <td><input type="button" value="Add" style="width: 74px ; background-color:transparent ;color:white" onclick="validation(this.form); "/></td>
                </tr>
                
            </table>
        </form>

JavaScript

function validation(form)
{
    
    if(form.memt.value == "select"){
        document.getElementById("f").value = document.getElementById("t").value;
        form.memt.style.backgroundColor = "aqua";
        form.name.style.backgroundColor = "";
        form.ic_1.style.backgroundColor = "";
        form.phone.style.backgroundColor = "";
        form.address.style.backgroundColor = "";
        form.memt.focus();
        alert("Please Select Your Member Type");
        pause;
    }
    if(form.name.value == ""){
        form.memt.style.backgroundColor = "";
        form.name.style.backgroundColor = "aqua";
        form.ic_1.style.backgroundColor = "";
        form.phone.style.backgroundColor = "";
        form.address.style.backgroundColor = "";
        form.name.focus();
        alert("You Need Specify Your Name");
        pause;
    }
    var alphabert = /^[a-zA-Z ]+$/;
    if(!form.name.value.match(alphabert))
    {
        form.memt.style.backgroundColor = "";
        form.name.style.backgroundColor = "red";
        form.ic_1.style.backgroundColor = "";
        form.phone.style.backgroundColor = "";
        form.address.style.backgroundColor = "";
        form.name.focus();
        document.getElementById("n").select();
        alert("Name Must Be In Alphabert Form.");
        pause;    
    }
    else{
        form.submit();
    }   
}     

document.getElementById('t').addEventListener('change', function(){
    switch(this.value){
        case "N":
            document.getElementById('f').value = "10";
            break;
        case "S":
            document.getElementById('f').value = "20";
            break;
        case "G":
            document.getElementById('f').value = "30";
            break;
        default:
            document.getElementById('f').value = "";
            break;
            
    }
});