PHP,HTML和Jquery:动态用户信息
我正在处理用于输入用户信息的PHP表单。我有这3个重要字段:名字,姓氏和电子邮件。我需要做的是在用户输入前两个字段并保存前自动设置电子邮件。例如,当用户在名字中键入“First”并在Last Name字段中键入“Last”时,电子邮件字段应自动显示[email protected]。PHP,HTML和Jquery:动态用户信息
代码已经编写,这是我工作的一部分:
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);
});
我的问题是,我不不知道如何在我的代码中应用这些。
是,如果你有一个像字段,你可以做到这一点
这
<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>
为进一步修改
评论...
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事件的变化。
编辑: 我改变了选择器按名称获取元素。也许这会有所帮助,让我知道它是否有效。如果没有,我会看看我能做什么,否则。
我是sry我不知道我怎么能得到你要求的HTML代码。 – user3640056 2014-10-10 12:51:36
你有什么方法查看页面? – terpak 2014-10-10 12:54:08
好吧,我不知道这是否有帮助,但我使用检查元素'添加学生',这就是我得到的:Add a Student – user3640056 2014-10-10 12:54:31
问题是我没有这些字段,上面的代码是PHP表单的一部分,它显示了first_name和last_name字段。我不允许为名称添加新字段。这是令人沮丧的:/ – user3640056 2014-10-10 12:20:38
我使用echo''添加了你的代码,并且已经添加了jquery库,但没有发生任何事情,它甚至没有在调试中通过它! – user3640056 2014-10-10 12:28:38
你有没有检查过他们的铬或火狐ID如果你知道他们的ID你可以在上面的jQuery代码 – Ronser 2014-10-10 12:32:12