Solved

Using JavaScript onblur to populate text fields

Posted on 2004-08-18
5
1,011 Views
Last Modified: 2008-03-03
Hi,
   What i am trying to do is populate a text field with the data that i enter in the previous field.
e.g when i enter a persons name in the first field i want to append, say "@hotmail.com", to it and add the whole value automaticaly to the next text field.

I understand you can do this by using Javascript onBlur but i'm not sure how.

Any help would be much appreciated

Thanks
0
Comment
Question by:mickmurph
  • 3
5 Comments
 
LVL 3

Expert Comment

by:alexpreston
ID: 11829239
something like...

<input type="text" id="txtName" onblur="Append();">
<input type="text" id="txtEmail">

<script>
function Append()
{
txtEmail.text = txtName.text + '@hotmail.com';
}
</script>
0
 
LVL 2

Expert Comment

by:mr_asphalt
ID: 11829429
that should be:
txtEmail.value = txtName.value + '@hotmail.com';
0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11829445
you're quite right, a slap on the wrists for me :)
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 11829458
this is a better method using "onkeypress"

<form name="frm">
      <input type="text" id="txtName" onkeypress="Append(this.value);">
      <input type="text" id="txtEmail">
</form>      

<script>
function Append(str)
{
       document.frm.txtEmail.value=str+'@hotmail.com';

}
</script>
0
 
LVL 3

Accepted Solution

by:
alexpreston earned 100 total points
ID: 11829495
Not sure I'd use onkeypress. I'd consider it overkill to change the email field for every keypress. But it is a valid solution!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now