Populate text box based on other textbox 1

Pudsters · Sep 12, 2018

I have a webpage with a textbox that displays the users name - which comes from a database that I don't have access to.

I want to display their email address in a textbox below their name.

I have a list of their names and emails in an external javascipt file.

My html fields:

HTML:

<label class="textbox-label">Employee Name</label><br />
<input type="text" id="empName" name="empName">
<br />

<label class="textbox-label">Email Address</label><br />
<input type="email" name="email" id="email">
<br />

My js list:

JavaScript:

  var myobject = {      
      'aaa@gmail.com' : 'EMPLOYEE A',
      'bbb@gmail.com' : 'EMPLOYEE B',
      'ccc@gmail.com' : 'EMPLOYEE C',
      'ddd@gmail.com' : 'EMPLOYEE D',
      'eee@gmail.com' : 'EMPLOYEE E',
  
  };

So if "EMPLOYEE C" lands on the webpage, I want "ccc@gmail.com" to populate the email box

feherke · Sep 12, 2018

Hi

As I understood your code is company's quite old intranet site, tried to use only old fashion code elements.

This fills the e-mail when the page is loaded and when the employee name is changed :

Code:

[b]<html>[/b]
[b]<head>[/b]
[b]<script[/b] [maroon]src[/maroon][teal]=[/teal][i][green]"external-file-with-email-addresses.js"[/green][/i][b]></script>[/b]
[b]<script>[/b]
[b]function[/b] [COLOR=orange]fillEmail[/color][teal]([/teal]event[teal])[/teal]
[teal]{[/teal]
    [b]var[/b] employee [teal]=[/teal] event [b]instanceof[/b] Event [teal]?[/teal] event[teal].[/teal]target [teal]:[/teal] event
    [b]for[/b] [teal]([/teal][b]var[/b] key [b]in[/b] myobject[teal]) {[/teal]
        [b]if[/b] [teal]([/teal]myobject[teal].[/teal][COLOR=orange]hasOwnProperty[/color][teal]([/teal]key[teal]) &&[/teal] employee[teal].[/teal]value [teal]==[/teal] myobject[teal][[/teal]key[teal]]) {[/teal]
            document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'email'[/green][/i][teal]).[/teal]value [teal]=[/teal] key
            [b]return[/b]
        [teal]}[/teal]
    [teal]}[/teal]
    document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'email'[/green][/i][teal]).[/teal]value [teal]=[/teal] [i][green]''[/green][/i]
[teal]}[/teal]
window[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'load'[/green][/i][teal],[/teal] [b]function[/b][teal]() {[/teal]
    [b]var[/b] employee [teal]=[/teal] document[teal].[/teal][COLOR=orange]getElementById[/color][teal]([/teal][i][green]'empName'[/green][/i][teal])[/teal]
    [COLOR=orange]fillEmail[/color][teal]([/teal]employee[teal])[/teal]
    employee[teal].[/teal][COLOR=orange]addEventListener[/color][teal]([/teal][i][green]'change'[/green][/i][teal],[/teal] fillEmail[teal],[/teal] [b]false[/b][teal])[/teal]
[teal]},[/teal] [b]false[/b][teal])[/teal]
[b]</script>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][i][green]""[/green][/i][b]>[/b]
[b]<label[/b] [maroon]class[/maroon][teal]=[/teal][i][green]"textbox-label"[/green][/i][b]>[/b]Employee Name[b]</label><br />[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"text"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"empName"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"empName"[/green][/i][b]>[/b]
[b]<br />[/b]

[b]<label[/b] [maroon]class[/maroon][teal]=[/teal][i][green]"textbox-label"[/green][/i][b]>[/b]Email Address[b]</label><br />[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][i][green]"email"[/green][/i] [maroon]name[/maroon][teal]=[/teal][i][green]"email"[/green][/i] [maroon]id[/maroon][teal]=[/teal][i][green]"email"[/green][/i][b]>[/b]
[b]<br />[/b]
[b]</form>[/b]
[b]</body>[/b]
[b]</html>[/b]

Feherke.
feherke.github.io

Pudsters · Sep 12, 2018

That worked perfectly! You are awesome!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Populate text box based on other textbox 1

Pudsters

Technical User

feherke

Programmer

Pudsters

Technical User

Similar threads

Part and Inventory Search

Sponsor