JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<form method="post" action="../profile/SaveProfile">
<label for="empId">Employee ID</label>                    
<input id="empId" name="empId" type="text" placeholder="FML-MMDDYYYY" required readonly>

<label for="title">Title</label>
<select id="title" name="title">
    <option value="0"></option>
    <option value="1">Attorney</option>
    <option value="2">Doctor</option>
    <option value="3">Professor</option>
    <option value="4">Engineer</option>                                    
</select>                                

<label for="fname">Name</label>                     
<input id="fname" name="fname" type="text" placeholder="* First Name" required>
<input id="mname" name="mname" type="text" placeholder="* Middle Name" required>
<input id="lname" name="lname" type="text" placeholder="* Surname" required>
<input id="ename" name="ename" type="text" placeholder="Ext">

<label for="dob">* Date of Birth</label>
<input id="dob" name="dob" type="text" required>

<label for="doa">Date of Original Appointment</label>
<input id="doa" name="doa" type="text">

<button type="button">Close</button>
<button type="submit">Save</button>
</form>

JavaScript

$(function() {
    $("#fname,#mname,#lname,#dob").keyup(function() {
        var birthdate = $("#dob").val().split('-');
        var fname = $("#fname").val();
        var lname = $("#lname").val();
        var mname = $("#mname").val();
        var empId = fname.charAt(0) + mname.charAt(0) + lname.charAt(0) + '-' + birthdate.join('');
        $("#empId").val(empId);
    });
});