PHP，HTML和Jquery：動態用戶信息

Question

我正在處理用於輸入用戶信息的PHP表單。我有這3個重要字段：名字，姓氏和電子郵件。我需要做的是在用戶輸入前兩個字段並保存前自動設置電子郵件。例如，當用戶在名字中鍵入「First」並在Last Name字段中鍵入「Last」時，電子郵件字段應自動顯示First.Last@example.com。

代碼已經編寫，這是我工作的一部分：

echo '<TABLE ><TR><TD >'.TextInput($student['FIRST_NAME'],'students[FIRST_NAME]','<FONT color=red>'._('First').'</FONT>','size=12 class=cell_floating maxlength=50 style="font-size:14px; font-weight:bold;"').'</TD><TD>'.TextInput($student['MIDDLE_NAME'],'students[MIDDLE_NAME]',''._('Middle').'','class=cell_floating maxlength=50 style="font-size:14px; font-weight:bold;"').'</TD><TD>'.TextInput($student['LAST_NAME'],'students[LAST_NAME]','<FONT color=red>'._('Last').'</FONT>','size=12 class=cell_floating maxlength=50 style="font-size:14px; font-weight:bold;"').'</TD><TD>'.SelectInput($student['NAME_SUFFIX'],'students[NAME_SUFFIX]',''._('Suffix').'',array('Jr.'=>'Jr.','Sr.'=>'Sr.','II'=>'II','III'=>'III','IV'=>'IV','V'=>'V'),'','style="font-size:14px; font-weight:bold;"').'</TD></TR></TABLE>'; 

else 
echo '<DIV id=student_name><div style="font-size:14px; font-weight:bold;" onclick=\'addHTML("<TABLE><TR><TD>'.str_replace('"','\"',TextInput($student['FIRST_NAME'],'students[FIRST_NAME]','','maxlength=50 style="font-size:14px; font-weight:bold;"',false)).'</TD><TD>'.str_replace('"','\"',TextInput($student['MIDDLE_NAME'],'students[MIDDLE_NAME]','','size=3 maxlength=50 style="font-size:14px; font-weight:bold;"',false)).'</TD><TD>'.str_replace('"','\"',TextInput($student['LAST_NAME'],'students[LAST_NAME]','','maxlength=50 style="font-size:14px; font-weight:bold;"',false)).'</TD><TD>'.str_replace('"','\"',SelectInput($student['NAME_SUFFIX'],'students[NAME_SUFFIX]','',array('Jr.'=>'Jr.','Sr.'=>'Sr.','II'=>'II','III'=>'III','IV'=>'IV','V'=>'V'),'','style="font-size:14px; font-weight:bold;"',false)).'</TD></TR></TABLE>","student_name",true);\'>'.$student['FIRST_NAME'].' '.$student['MIDDLE_NAME'].' '.$student['LAST_NAME'].' '.$student['NAME_SUFFIX'].'</div></DIV>'; 
echo'</td></tr>'; 


echo '<tr><td>'._('Email').'</td><td>:</td><td>'.TextInput($student['EMAIL'],'students[EMAIL]','','size=100 class=cell_medium maxlength=100').'</td></tr>'; 

我不知道我應該如何對其進行編輯或者添加jQuery代碼。

注：我已經有下列選項，因爲我已經問過這個問題之前：

選項1：

$('body').on('blur', '.firstname, .lastname', function(){ 

    var fname = $.trim($('.firstname').val()), 
     lname = $.trim($('.lastname').val()), 
     email = $('#email'), 

     // Set your domain name here 
     prefix = '@example.com'; 

    if(fname != "" && lname != "") 
     email.val(fname + '.' + lname + prefix); 
    else if(fname == "" && lname == "") 
     email.val(""); 
    else 
     email.val((fname != "" ? fname : lname) + prefix); 

}); 

選項2：

$('#firstName', '#lastName').keyup(function() { 

    var domain = 'example.com'; 
    var email = $('#firtName').val() + '.' + $('#lastName').val() + '@' + domain; 
    $('#email').val(email); 

}); 

我的問題是，我不不知道如何在我的代碼中應用這些。

Answer 1

是，如果你有一個像字段，你可以做到這一點

這

<input type="text" name="fn" value="" id="firstname" maxlength="30" /> 
<input type="text" name="ln" value="" id="lastname" maxlength="30" /> 
<input type="text" name="em" value="" id="email" maxlength="30" />  

把下面的腳本在你的HTML內容的底部

不要忘記添加了jQuery圖書館

<script type="text/javascript"> 
$("#lastname").blur(function() { //blur event is called when the textbox lost focus 
    var vall = $("#firstname").val()+$("#lastname").val()+"@example.com"; 
    $("#email").val(vall); 
}) ; 
</script> 

爲進一步修改

評論...

Answer 2

var namehandler = function(){ 
    var firstname = $('[name="students[FIRST_NAME]"]'); 
    var lastname = $('[name="students[LAST_NAME]"]'); 
    var email = $('[name="students[EMAIL]"]'); 

    if (firstname.val() == '' || lastname.val() == ''){ 
     email.val(''); 
     return; 
    } 

    email.val(firstname.val() + '.' + lastname.val() + '@email.com'); 
}; 

$(document).ready(function(){ 
    $('[name="students[LAST_NAME]"]').keyup(namehandler); 
    $('[name="students[FIRST_NAME]"]').keyup(namehandler); 
}); 

下面是對的jsfiddle鏈接：http://jsfiddle.net/xw44gwvt/1/

這使得電子郵件瞬間變化時，名字或姓氏使用keyup事件的變化。

編輯： 我改變了選擇器按名稱獲取元素。也許這會有所幫助，讓我知道它是否有效。如果沒有，我會看看我能做什麼，否則。