Solved

Setting a form field value

Posted on 2004-10-05
3
212 Views
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>
</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
Comment
Question by:joebox
3 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 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">
<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
 
LVL 30

Expert Comment

by:third
ID: 12225143
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
 

Author Comment

by:joebox
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
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

760 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

22 Experts available now in Live!

Get 1:1 Help Now