Question

我正在使用PHP表单输入用户信息。我有以下三个重要字段：名字，姓氏和电子邮件。我需要做的是在用户输入前两个字段时和保存之前自动设置电子邮件。例如，当用户在名字中键入“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事件更改名字或姓氏时，电子邮件会立即更改。

编辑：我更改了选择器以按名称获取元素。也许这会有所帮助，让我知道它是否有效。如果没有，我会看到我能做什么。

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

2 个答案: