autofill email address based on username chosen from list

Forum Moderators: open

Message Too Old, No Replies

autofill email address based on username chosen from list

email list dependent field

lvic

4:53 pm on May 7, 2008 (gmt 0)

I have a somewhat unique issue with a scheduling form. When i choose a staffer's name from a pulldown list, I want the email field below the name field to auto-fill with the staffer's address. BUT I also want the name field to be submitted as well (or else I would have just used the email address as the value, as per usual.)

Is there any way to pull this off? Thanks!

rocknbil

6:24 pm on May 7, 2008 (gmt 0)

Welcome aboard lvic, for various reasons - security, spam abuse, creating functional pages that are NOT Javascript-dependent - this is not the best way to do this. Your best bet is to is a numeric value in the select lists, then use your server-side processor to sort them out. Something like

<select name="contact" id="contact">
<option value="">Select Contact</option>
<option value="1">John Doe</option>
<option value="2">Jane Doe</option>
<option value="3">John Smith</option>
</select>

Then your server-side processor would do

1=johndoe@example.com
2=janedoe@example.com
3=johnsmith@example.com

And the submittor never sees the email address, which is the largest inception point for spam abuse.

But if you must, something like this should work. :-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!-- doctype all on one line! --> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<script type="text/javascript"> 
function popField() { 
//Always IF documentGetElementById. So much easier than checking browsers. 
 if (document.getElementById('to_email')) { 
  var ind = document.getElementById('contact').selectedIndex; 
if (ind == 0) { document.getElementById('to_email').value=''; } 
else { document.getElementById('to_email').value= 
    document.getElementById('contact').options[ind].value; 
    // Put the previous two lines all on one line,  
    //it was making page too wide here. 
    } 
 } 
} 
</script> 
</head> 
<body> 
<form> 
<select name="contact" id="contact" onChange="popField();"> 
<option value="">Select Contact</option> 
<option value="johndoe@example.com">John Doe</option> 
<option value="janedoe@example.com">Jane Doe</option> 
<option value="johnsmith@example.com">John Smith</option> 
</select> 
<input type="text" name="to_email" id="to_email"> 
</form> 
</body> 
</html>

Please note the use of a blank select list item. This is what allows you to reset the list.

lvic

7:59 pm on May 7, 2008 (gmt 0)

Thanks very much! One thing I'm trying to add to this is the ability of it to pass both the name and the email as separate fields. Meaning, if you choose John Doe, the form will pass the values name=John Doe and email =johndoe@example.com. Is that possible?

rocknbil

9:52 pm on May 8, 2008 (gmt 0)

Well, server side you would do the same as I mentioned before, 1= "John Doe"; etc. Really the best way.

For JS, you could use the text attribute of the option:


function popField() { 
 if (document.getElementById('to_email')) { 
 var ind = document.getElementById('contact').selectedIndex; 
if (ind == 0) { document.getElementById('to_email').value=''; } 
else {  
 document.getElementById('to_name').value= 
 document.getElementById('contact').options[ind].text; 
 document.getElementById('to_email').value= 
 document.getElementById('contact').options[ind].value; 
} 
 } 
}

Alternatively you could separate the values in the select with a colon

And use the split() method


 else {  
 var vals = document.getElementById('contact').options[ind].value.split(':');  
 document.getElementById('to_name').value= vals[0]; 
 document.getElementById('to_email').value= vals[1]; 
 }

Both assuming you add a field id'ed "to_name".

lvic

2:57 pm on May 9, 2008 (gmt 0)

Hmm, I've tried a test page, using the HTML code provided, and getting a javascript error: "Line 4, character 201, error: 'document.getElementByID[...]' is null or not an object."

*****************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function popField() { if (document.getElementById('to_email')) { var ind = document.getElementById('contact').selectedIndex; if (ind == 0) { document.getElementById('to_email').value=''; } else { document.getElementById('to_name').value= document.getElementById('contact').options[ind].text; document.getElementById('to_email').value= document.getElementById('contact').options[ind].value; } } } </script>
</head>
<body> <form> <select name="contact" id="contact" onChange="popField();"> <option value="">Select Contact</option> <option value="johndoe@example.com">John Doe</option> <option value="janedoe@example.com">Jane Doe</option> <option value="johnsmith@example.com">John Smith</option> </select> <input type="text" name="to_email" id="to_email"> </form><P></P> </body> </html>
********************

rocknbil

3:37 pm on May 9, 2008 (gmt 0)

Both assuming you add a field id'ed "to_name".

add

lvic

8:10 pm on May 9, 2008 (gmt 0)

Grrr, looks like I re-copied & pasted a few too many times... did it again w/approp. corrections and it works beautifully. Thanks very much, I'll go ahead and integrate this into my PHP script's HTML output.

Thanks again!