Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Setting a form field value

Posted on 2004-10-05
Medium Priority
Last Modified: 2008-02-01
Hi all, I am desinging a web mail program and need a little help in javascript.  on the write mail page are form fields: To, CC, BCC.  also on the page is a <select> list of all email addresses in thier addressbook which is located in a database.  When a user clicks on any name in the <select> list I am trying to enter that email address into the selected form field.  I currently have a simple script below:

Pull Query from Database of all user contacts

<form name="send_email">

<input name="To" type="text" value="">

<select name="addresses" size="10" onChange="this.form.To.value= this.value;">
<loop all records from query above>
  <option value="1">1</option>


As you can see it is a very simple procedure.  What I need to do is be able to select multiple email addresses and have them append to the form field so the user can send an email to multiple people at one time.  After the first email address, is suppose to be a comma to seperate the different addresses.  The way I have it, the field will only display 1 email addresss.

Also I want to be able to set focus on the next form field "CC", and do the same, enter multiple addresses from the same <select> address list.  Also, if it isnt to much, possibly add a small image arrow.gif next to each text field as it is selected to enter the addresses.  Thanks So So much For Your Time...  Joe
Question by:joebox
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 49

Accepted Solution

Roonaan earned 2000 total points
ID: 12225051
Hi Joe,

There are about three aspects inside your question. I'll deal with then one at a time.

First I set up a table to give things a bit of layouting and to be able to do the highlighting you suggested as 'little arrow.gif'

In simple form the layout is about something like:
<form class="sel_none">
 <tr class="row_to"><td><input name="to" /></td></tr>
 <td class="row_cc"><td><input name="cc" /></td></tr>

In order to do the highlighting I change the className of the <form> element when someone clicks/selects your inputs. For example; when somebody clicks the <input name="to"> to <form> will change to <form class="sel_to">. With some css you could then easily arrange the highlighting in any fashion you'd wish. I used:

form.sel_to tr.row_to td {border:solid 1px red;}

But for an arrow you could always use the background-image property:

form.sel_to tr.row_to td {background-image:url('arrow.gif');background-repeat:no-repeat;}

>>> On to the selectbox. >>>

On the same onclick event as used to change the form classname, we register which of the fields was the last to be selected. If we would know this obviously it would be very simple to add the selected value to the right textfield. So we just store it.
Then when someone clicks the selectbox, we would want some test to see if the textfield is empty or not, as to add semicolon's between the different emailadresses:
function add_value(value)
    if(selectedfield.value.length > 0)
      selectedfield.value += "; ";
    selectedfield.value += value;

The only thing remaining is the focusing, but haven't done that yet, and probably you could do it yourself by using:
form.To.focus(); form.Cc.focus() and form.Bcc.focus();

The full code below



>>> The code >>>

.row_to td, .row_cc td, .row_bcc td{border:1px solid white;}
form.sel_to  .row_to  td {border:1px solid red;}
form.sel_cc  .row_cc  td {border:1px solid red;}
form.sel_bcc .row_bcc td {border:1px solid red;}

<script type="text/javascript">
var selectedfield = false;
function do_select(form_field)
  id = form_field.id;
  if(!id) return;
  if(id.substring(0,4) == 'fld_')
    selectedfield = form_field;
    selectedfield.form.className = 'sel_' + selectedfield.name;
    status = 'Unknown field id ' + id;
    selectedfield = false;
    form_field.form.className = 'sel_none';

function add_value(value)
    if(selectedfield.value.length > 0)
      selectedfield.value += "; ";
    selectedfield.value += value;

<form name="send_email" class="sel_none">
  <tr class="row_to">
    <input id="fld_to" name="To" type="text" value="" onclick="do_select(this);" />
   <th rowspan="3">
    <select name="addresses" size="10" onclick="add_value(this.value);">
     <option value="a@b.com">a@b.com</option>
     <option value="b@c.com">b@c.com</option>
     <option value="c@d.com">c@d.com</option>
  <tr class="row_cc">
    <input id="fld_cc" name="Cc" type="text" value="" onclick="do_select(this);" />
  <tr class="row_bcc">
    <input id="fld_bcc" name="Bcc" type="text" value="" onclick="do_select(this);" />
  <tr class="row_text">
   <td colspan="2">
    <textarea id="txt_text" onclick="do_select(this)"></textarea>
LVL 30

Expert Comment

ID: 12225143
my version,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
  var lastFocus = '';

  function setLastFocus(obj){
    lastFocus = obj.name;

  function getSelectedEmailAdd(obj){
    var str = '';
      var delimeter = ', ';
      var newobj;
      var selCount = 0;

        alert('You need to focus first on "To", "CC", or "BCC" fields before doing this action!');

    for(var i=0; i<obj.options.length; i++){
          str += (selCount>1?delimeter:'') +  obj.options[i].value;

        alert('No email address selected!');
          newobj = eval('obj.form.' + lastFocus);
      newobj.value = str;
<form name="form1" method=post action="" onsubmit="">
To<input type="text" name="txtTo" onfocus="setLastFocus(this)"><br>
CC<input type="text" name="txtCc" onfocus="setLastFocus(this)"><br>
BCC<input type="text" name="txtBcc" onfocus="setLastFocus(this)"><br>
<select name="selAddressBook" multiple size="10">
<option value="a@a.com">a@a.com</option>
<option value="b@a.com">b@a.com</option>
<option value="c@a.com">c@a.com</option>
<option value="d@a.com">d@a.com</option>
<option value="e@a.com">e@a.com</option>
<input type="button" value="Add" onclick="getSelectedEmailAdd(this.form.selAddressBook)">

Author Comment

ID: 12230692
thanx you guys are great.  Roonaan this is exactly what I was looking for 100%. Third yours was also great but having to click the add button isnt something I wanted to incorporate and the text fields only held 1 address at a time.  Thanks for your help and the different idea anyway.    Joe

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

618 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