JavaScript / Jquery根據用戶輸入自動生成員工ID

Question

我正在使用Servlet生成empId但老板希望用戶輸入時，他將根據輸入的empId立即看到empId 。 而且我對JavaScript或JQuery並不是很熟悉，但是我認為這是執行此操作的正確工具。 請幫忙？

empId包含名字，中間名和姓氏中的第一個字符，外加破折號和出生日期。 樣本為JHD-01011990 。

這是我的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>

如果需要，這也是我用於生成empId Java代碼

public String generateEmployeeId(String dateOfBirth, String firstName, String middleName, String surname) {        
    String[] birthdate = dateOfBirth.split("-");

    String empId = firstName.charAt(0) + middleName.charAt(0) + surname.charAt(0);
    empId += "-" + birthdate[1] + birthdate[2] + birthdate[0];

    return empId;
}

我想發布一份表格樣本屏幕快照，但我不能。 請告訴我您是否需要它。

謝謝！

Answer 1

這是jQuery代碼：

$(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);
    });
});

這是Java代碼的直接翻譯，包裝在jQuery事件處理程序中，並使用.val()從輸入字段中獲取值。

演示

Answer 2

被毆打，但仍在張貼。 這是使用jQuery的相同解決方案

$(function(){
$( "#fname,#mname,#lname,#dob").keyup(function( event ) {
  if ( event.which == 13 ) {
     event.preventDefault();
  }

//you probably want to do a bit more checking of the DOB value - such as length etc., I am merely stripping all non numerics from it    
    id = $("#fname").val().charAt(0) + $("#mname").val().charAt(0) + $("#lname").val().charAt(0) + "-" + $("#dob").val().replace(/\D/g,'');

    $("#empId").val(id);

});

})

演示版