• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 227
  • Last Modified:

Setting a form field value

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>
</loop>  
</select>

</form>


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
0
joebox
Asked:
joebox
1 Solution
 
RoonaanCommented:
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">
<table>
 <tr class="row_to"><td><input name="to" /></td></tr>
 <td class="row_cc"><td><input name="cc" /></td></tr>
</table>
</form>

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)
  {
    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

Regards

-r-

>>> The code >>>

<style>
.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;}
</style>

<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;
  }
  else
  {
    status = 'Unknown field id ' + id;
    selectedfield = false;
    form_field.form.className = 'sel_none';
  }
}

function add_value(value)
{
  if(selectedfield)
  {
    if(selectedfield.value.length > 0)
      selectedfield.value += "; ";
    selectedfield.value += value;
  }
}
</script>

<form name="send_email" class="sel_none">
 <table>
  <tr class="row_to">
   <td>
    <input id="fld_to" name="To" type="text" value="" onclick="do_select(this);" />
   </td>
   <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>
    </select>
   </th>
  </tr>
  <tr class="row_cc">
   <td>
    <input id="fld_cc" name="Cc" type="text" value="" onclick="do_select(this);" />
   </td>
  </tr>
  <tr class="row_bcc">
   <td>
    <input id="fld_bcc" name="Bcc" type="text" value="" onclick="do_select(this);" />
   </td>
  </tr>
  <tr class="row_text">
   <td colspan="2">
    <textarea id="txt_text" onclick="do_select(this)"></textarea>
   </td>
  </tr>
 </table>
</form>
0
 
thirdCommented:
my version,

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

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

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

    if(lastFocus==''){
        alert('You need to focus first on "To", "CC", or "BCC" fields before doing this action!');
        return
    }

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

      if(str==''){
        alert('No email address selected!');
    }
      else{
          newobj = eval('obj.form.' + lastFocus);
      newobj.value = str;
    }
  }
</script>
</head>
<body>
<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>
</select>
<input type="button" value="Add" onclick="getSelectedEmailAdd(this.form.selAddressBook)">
</form>
</body>
</html>
0
 
joeboxAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now