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

时间:2014-08-19 01:04:22

标签: javascript jquery html-form

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

如果需要,这里也是我用于生成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;
}

我想张贴一张我的表格的样本截图,但我不能。请告诉我你是否需要它。

谢谢!

2 个答案:

答案 0 :(得分:0)

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

DEMO

答案 1 :(得分:0)

被打败但仍然张贴。这是使用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);

});

})

Demo