PHP, HTML and Jquery: Dynamic User Info

Question

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 [email protected].

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.

Ronser · Accepted Answer · 2014-10-10 12:12:15Z

1

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

edited Oct 10, 2014 at 12:12

answered Oct 10, 2014 at 12:02

Ronser

1,8756 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3640056 Over a year ago

The problem is that I don't have fields like those, the code above is a part of a php form and it shows the first_name and last_name fields. I'm not allowed to add new fields for the name. This is frustrating :/

user3640056 Over a year ago

I added your code by using echo'<script>...</script>' and the jquery library is already added, but nothing happened it even didn't pass through it in the debug!!

Ronser Over a year ago

have you inspected what are their id's in chrome or firefox if you know their id's you can replace in the above jquery code

terpak · Accepted Answer · 2014-10-10 13:10:00Z

0

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.

edited Oct 10, 2014 at 13:10

answered Oct 10, 2014 at 12:30

terpak

1,1413 gold badges19 silver badges38 bronze badges

5 Comments

user3640056 Over a year ago

I'm sry I don't know how can I get the HTML code you're asking for.

terpak Over a year ago

Do you have any way of viewing the page?

user3640056 Over a year ago

ok, i don't know if this helps but I used inspect element for 'add a student' and this is what i got: <a class="submenu_link" id="hm" href="#" onclick="check_content("ajax.php?modname=Students/Student.php&include=General_Info&student_id=new ");" target="body" onmousedown="document.getElementById("header").innerHTML = "Students >> Add a Student"" onmouseup="changeColors(); this.className='submenu_link'; document.getElementById('cframe').src='Bottom.php?modname=Students/Student.php?include=General_Info?student_id=new';">Add a Student</a>

terpak Over a year ago

Could you inspect the element of the first, last and email inputs?

user3640056 Over a year ago

Sure, this is the result: <input type="text" name="students[FIRST_NAME]" size="12" class="cell_floating" maxlength="50" style="font-size:14px; font-weight:bold;"> <input type="text" name="students[LAST_NAME]" size="12" class="cell_floating" maxlength="50" style="font-size:14px; font-weight:bold;"> <tr><td>Email</td><td>:</td><td><input type="text" name="students[EMAIL]" size="100" class="cell_medium" maxlength="100"></td></tr>

Collectives™ on Stack Overflow

PHP, HTML and Jquery: Dynamic User Info

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related