PHP，HTML和Jquery：动态用户信息

I'm working on a PHP form for inputting user information. I have these 3 important fields: First Name, Last Name, and E-mail. What I need to do is to set the E-mail automatically when the user enters the first two fields and before saving. For example when the user types 'First' in the First Name and 'Last' in the Last Name fields, the E-mail field should automatically show First.Last@example.com.

The code is already written and this is the part I'm working on:

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

I don't know how I'm supposed to edit it or where to add the jquery code.

Note: I already have the following options as I've asked this question before:

Option1 :

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

});

Option2:

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

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

});

My Problem is that I don't know how to apply any of this in my code.

Yes you can do this

if you have fields like this

<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" />    

put the following script at the bottom of your html content

dont forget to add the jquery library

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

comment for further changes...

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

Here's a link to the JSFiddle: http://jsfiddle.net/xw44gwvt/1/

This makes the email change instantly when the first or last name changes using the keyup event.

EDIT: I changed the selector to get element by name. Maybe this will help, let me know if it works. If not, I'll see what i can do otherwise.