JavaScript/Jquery根据用户输入自动生成员工Id

JavaScript/Jquery Auto Generate Employee Id based on user input

本文关键字：成员 Id 输入 Jquery 用户 JavaScript      更新时间：2023-09-26

我正在使用Servlet生成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>

如果需要，这里也是我的Java代码生成empId 

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;
}

我想张贴一个样本屏幕截图的形式，但我不能。如果你需要的话，请告诉我。

谢谢!

下面是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()从输入字段获取值。

演示

被打败了，但还在发帖。这是相同的解决方案使用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);
});
})
演示

相关文章：