Jump to content

Copying and concatenating 2 different form field values


gecko

Recommended Posts

Hi,

 

Im looking for a piece of javascript I can incorporate into some web forms I have got for adding student and staff records to a db.

 

Basically, each form firstly requests for firstName and surname for the new user's record.

 

Further down the form, it then asks for the user's email address.

 

What I want to do is take the value entered in the FirstName field and the Surname field, concatenate them together to make an email address suggestion in the email field.

 

So, if firstName was 'joe' and surname was 'bloggs', then the suggested email value could be = joe.bloggs@universityname.com

 

Any ideas?

 

I have written some stuff myself, but it isn't working for adding 2 values; at present, when the surname is completed, the surname value replaces the firstName value in the email field.

 

Any ideas from someone more experienced with JS would be much appreicated!!

Link to comment
Share on other sites

I'ver deleted everything that I did for it, as it wasn't working - it was only adding one value at a time.

So I thought I must have been doing somethi the lookout for anyone who may have done something similar for one of their sites ;)

 

Any suggestions would be great, as Im no expert

Link to comment
Share on other sites

This should get you started. Note that I would suggest adding some code to remove/replace characters that are invalid for an email. For example a last name like "De la hoya" or "O'Doyle"

 

<html>
<head>

<script>
function suggestEmail()
{
    //Create references to the fields
    var fName = document.getElementById('fname');
    var lName = document.getElementById('lname');
    var eMail = document.getElementById('email');

    //Set suggested email if firt & last names have value and email does not
    if (fName.value && lName.value && !eMail.value)
    {
        eMail.value = fName.value + '.' + lName.value + '@domainname.com';
    }
    return;
}
//
</script>

</head>
<body>
<form name="myform">

  First Name:
  <input type="text" name="fname" id="fname" onchange="suggestEmail();" /><br />
  Surname:
  <input type="text" name="lname" id="lanme" onchange="suggestEmail();" /><br />
  Email Address:
  <input type="text" name="email" id="email" /><br />

</form>

</body>
</html>

Link to comment
Share on other sites

Added some code to ensure a proper email is created. This will replce spaces with an underscore and will remove any invalid characters (not a-z, 0-9, underscore "_", dash "-" or period ".").

 

<html>
<head>

<script>
function suggestEmail()
{
    //Create references to the fields
    var fNameObj = document.getElementById('fname');
    var lNameObj = document.getElementById('lname');
    var eMailObj = document.getElementById('email');

    //Set suggested email if firt & last names have value and email does not
    if (fNameObj.value && lNameObj.value && !eMailObj.value)
    {
        var uname = fNameObj.value + '.' + lNameObj.value;
        uname = uname.replace(/[ ]/g, '_');
        uname = uname.replace(/[^\w\d-\.]/gi, '');
        eMailObj.value = uname + '@domainname.com';
    }
    return;
}
//
</script>

</head>
<body>
<form name="myform">

  First Name:
  <input type="text" name="fname" id="fname" onchange="suggestEmail();" /><br />
  Surname:
  <input type="text" name="lname" id="lanme" onchange="suggestEmail();" /><br />
  Email Address:
  <input type="text" name="email" id="email" /><br />

</form>

</body>
</html>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.