Solved

Create Email from JavaScript

Posted on 2001-06-18
33
279 Views
Last Modified: 2008-03-03
Hi,

I have created a form which user enters in name, email, phone number and I want the details to get emailed to me when they click submit. I want the contents of the input boxes to appear in the email formatted as I would like them so that they can add additional information to the email is they wish. How is this possible - at the moment when they click submit to open up an email address to me but the message is blank.

0
Comment
Question by:bb2000
[X]
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
  • 15
  • 12
  • 2
  • +3
33 Comments
 
LVL 12

Expert Comment

by:ahosang
ID: 6201756
What code do you have at the moment?
0
 

Author Comment

by:bb2000
ID: 6201769
<FORM ENCTYPE="text/plain" NAME="Conflict" METHOD='POST'
ACTION='mailto:test@test.com' onSubmit="return submitForm()">

I need to know how to add the contents of the input boxes into the message section of the email

0
 
LVL 12

Expert Comment

by:ahosang
ID: 6201785
That SHOULD work I think!?
So what's happening? What's the submitForm() function doing?
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6201885
Only works if the mailclient is set up to handle it. Only client that works straight out of the box is netscape3 to 4.7

Michel
0
 

Author Comment

by:bb2000
ID: 6202707
It works fine I just want to know  how to create a messaage part. I want the contents of the input boxes to apear in the message section
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6202780
try this:
<body>
<form name=myForm>
<input type="text" name="f1" value="">
<input type="text" name="f2" value="">
</form>
<a href="#"
onClick="this.href='mailto:michel@irt.org?subject=My%20Subject&body='+
escape(document.myForm.f1.value)+'%0A'+escape(document.myForm.f1.value); return true">Mail</a>


</body>
0
 

Author Comment

by:bb2000
ID: 6202808
is this possible in a function to create the message as i have about 10 input boxes and would like to format them neatly on the message. what does 'escape' refer to?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6202938
The escape is to convert all non a-z+&~0-9 to %xx type url encoded values.

<body>
<form name=myForm>
<input type="text" name="f1" value="">
<input type="text" name="f2" value="">
.
.
.
</form>
<a href="#"
onClick="loc='mailto:michel@irt.org?subject=My%20Subject&body=';
for (i=0;i< document.myForm.elements.length;i++)  {
   if (document.myForm.elements[i].type=='text')
      loc += document.myForm.elements[i].name+':'+
escape(document.myForm.elements[i].value)+'%0A';
}
this.href=loc;
return true">Mail</a>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6202951
or
<script>
function doMail() {
   var loc='mailto:michel@irt.org?subject=My%20Subject&body=';
   for (i=0;i< document.myForm.elements.length;i++)  {
      if (document.myForm.elements[i].type=='text')
      loc += document.myForm.elements[i].name+':'+
         escape(document.myForm.elements[i].value)+'%0A';
      }
   return loc;
}
</script>
<a href="#"
onClick="this.href="doMail();return true">Mail</a>

Michel
0
 

Expert Comment

by:kamcheungon
ID: 6204636
What you really need is mailform cgi on the server. This works exactly the way you want it to work and more, every time.
0
 

Author Comment

by:bb2000
ID: 6205596
can you explain how that works please and how to do it
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6205688
The most used is Matt's Formmail:

http://worldwidemart.com/scripts/formmail.shtml

You need a cgi-bin directory - but most ISPs will have this script as canned script  - ask them!

Michel
0
 

Author Comment

by:bb2000
ID: 6205704
thanks but it doesn't really help as most of the links on that page appear to have expired. I'd prefer to use javascript if possible.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6205713
??? None of the links I clicked on were expired - including the download link...

You can use the script we have provided. If you want to make sure you get the data you need a script like Matt's
0
 

Author Comment

by:bb2000
ID: 6206540
Using the following code I create an email from the contents of a form. However I need to have each line on the BODY formatted so that they print on individual lines. How is this possible - at the moment it creates the Body section in one long line and characters seem to get cut off after about 256. Any ideas

function getbody()    
{
     strMessage =  "Conflict Posted By:" + document.emailForm.txt1.value
     strMessage1 = "Matter Partner:" + document.emailForm.lstClientPart.value
     strMessage2 = "Client:            " + document.emailForm.txtClient.value
     strMessage3 = "Industry Sector: " + document.emailForm.txtIndSector.value
     strMessage4 = "Client Connections: " + document.emailForm.txtClientConn.value
     strMessage5 = "Adverse Party: " + document.emailForm.txtAdParty.value
     strMessage6 = "Adverse Party Industry Sector: " + document.emailForm.txtAdPartyIS.value
     strMessage7 = "Adverse Party Connections: " + document.emailForm.txtAdPartyConn.value
     strMessage8 = "Brief description of matter: " + document.emailForm.txtBriefDesc.value
     strMessage9 = "Additional Information: " + document.emailForm.txtAddInfo.value
     strMessage10 = "Answer requested by: " + document.emailForm.lstAnswer.value
     strAll = strMessage + strMessage1 + strMessage2 + strMessage3 + strMessage4 + strMessage5 + strMessage6 + strMessage7 + strMessage8 + strMessage9 + strMessage10
}
     
function update(what) {
    what.action = 'mailto:' + document.hiddenForm.emailAddress.value +
                  '?SUBJECT=' + document.hiddenForm.subjectLine.value +
            '?BODY=' + strAll;
    what.elements[' '].value += '\n\n';
}
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6206695
                 function getbody()    
                     {
                         strMessage =  "Conflict Posted By:" + document.emailForm.txt1.value
                         strMessage1 = "Matter Partner:" + document.emailForm.lstClientPart.value
                         strMessage2 = "Client:            " + document.emailForm.txtClient.value
                         strMessage3 = "Industry Sector: " + document.emailForm.txtIndSector.value
                         strMessage4 = "Client Connections: " + document.emailForm.txtClientConn.value
                         strMessage5 = "Adverse Party: " + document.emailForm.txtAdParty.value
                         strMessage6 = "Adverse Party Industry Sector: " + document.emailForm.txtAdPartyIS.value
                         strMessage7 = "Adverse Party Connections: " + document.emailForm.txtAdPartyConn.value
                         strMessage8 = "Brief description of matter: " + document.emailForm.txtBriefDesc.value
                         strMessage9 = "Additional Information: " + document.emailForm.txtAddInfo.value
                         strMessage10 = "Answer requested by: " + document.emailForm.lstAnswer.value
                         strAll = strMessage + "%A" +
strMessage1 + "%A" +
strMessage2 + "%A" +
 strMessage3 + "%A" +
 strMessage4 + "%A" +
 strMessage5 + "%A" +
 strMessage6 + "%A" +
strMessage7 + "%A" +
strMessage8 + "%A" +
strMessage9 + "%A" +
strMessage10
                     }

and I woudl use

"Conflict Posted By:" + escape(document.emailForm.txt1.value)

Michel
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6206697
ANd the %A shoudl be %0A
sorry

Michel
0
 

Author Comment

by:bb2000
ID: 6206743
This does not work. I have tried exactly what you said but the message of the email is still one continuous string.

function update(what) {
    what.action = 'mailto:' + document.hiddenForm.emailAddress.value +
                  '?SUBJECT=' + document.hiddenForm.subjectLine.value +                
            '?BODY=' + "Conflict Posted By:" + escape(document.emailForm.txt1.value) + "%0A" + "Conflict Posted By:" + escape(document.emailForm.lstClientPart.value)
    //what.elements[' '].value += '\n\n';
}
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6206756
Try
%0D%0A

Michel

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6206758
%0A works in messenger

Michel
0
 

Author Comment

by:bb2000
ID: 6206778
I am using MS Outlook 97 and editing the code using visual interdev. The new one you mention does not work either.

'?BODY=' + "Conflict Posted By:" + escape(document.emailForm.txt1.value) + "%0D%0A" + "Conflict Posted By:" + escape(document.emailForm.txt1.value)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6206810
Then I cannot help you...

Michel
0
 

Author Comment

by:bb2000
ID: 6206816
Copy and paste the script below into a notepad and save as HTM file and view to see what I mean.,

<script language="JavaScript">
<!--
function Reset() {
      document.emailForm.PostedBy.value = "";
      document.emailForm.txtClient.value = "";
      document.emailForm.txtIndSector.value = "";
      document.emailForm.txtClientConn.value = "";
      document.emailForm.txtAdParty.value = "";
      document.emailForm.txtAdPartyIS.value = "";
      document.emailForm.txtAdPartyConn.value = "";
      document.emailForm.txtBriefDesc.value = "";
      document.emailForm.txtAddInfo.value = "";
      document.emailForm.lstAnswer.value = "";
}
function getbody()      
{
      strMessage =  "Conflict Posted By:" + escape(document.emailForm.txt1.value)
      strMessage2 = "Client:              " + escape(document.emailForm.txtClient.value)
      strMessage3 = "Industry Sector: " + escape(document.emailForm.txtIndSector.value)
      strMessage4 = "Client Connections: " + escape(document.emailForm.txtClientConn.value)
      strMessage5 = "Adverse Party: " + escape(document.emailForm.txtAdParty.value)
      strMessage6 = "Adverse Party Industry Sector: " + escape(document.emailForm.txtAdPartyIS.value)
      strMessage7 = "Adverse Party Connections: " + escape(document.emailForm.txtAdPartyConn.value)
      strMessage8 = "Brief description of matter: " + escape(document.emailForm.txtBriefDesc.value)
      strMessage9 = "Additional Information: " + escape(document.emailForm.txtAddInfo.value)
      strMessage10 = "Answer requested by: " + escape(document.emailForm.lstAnswer.value)
      strAll = strMessage + "%0A" + strMessage2 + strMessage3 + strMessage4 + strMessage5 + strMessage6 + strMessage7 + strMessage8 + strMessage9 + strMessage10
}
      
function update(what) {
    what.action = 'mailto:' + document.hiddenForm.emailAddress.value +
                  '?SUBJECT=' + document.hiddenForm.subjectLine.value +                
              '?BODY=' + "Conflict Posted By:" + escape(document.emailForm.txt1.value) + "%0D%0A" + "Conflict Posted By:" + escape(document.emailForm.txt1.value)
    //what.elements[' '].value += '\n\n';
}

                  var bV=parseInt(navigator.appVersion);
                  if (bV>=4)
                        {
                            document.write('<style>');
                            document.write(' b.gray {color:003366}');
                            document.write(' b.darkslategray {color:darkslategray}');
                            document.write(' font.grayback {background:dddddd}');
                            document.write(' td {font-family:verdana;font-size:11.5px; color:darkslategray}');
                            document.write(' td.bigger {font-family:verdana;font-size:12.5px; color:333333}');
                            document.write(' td.list {font-family:verdana;font-size:11.5px; color:333333}');
                            document.write(' td.header {font-family:verdana;font-size:12.5px; color:white;background:663300}');
                            document.write(' td.descriptor {font-family:arial; font-size:12px; color:000033}');
                            document.write(' td.footer {font-family:arial; font-size:11px; color:336666}');
                            document.write(' td.ct {font-family:verdana;font-size:10.5px; color:333333}');
                            document.write(' span {font-family:verdana; font-size:11.5px; color:003333}');
                            document.write(' pre {font-family:verdana; font-size:11px; COLOR:green; text-decoration: none;}');
                            document.write(' span.projectlinksec {color:336666}');
                            document.write(' span.dark {color:330000;font-size:13px}');
                            document.write(' span.grayedlink {color:slategray}');
                            document.write(' span.datestamp {font-family:arial; font-size:10px; color:gray}');
                            document.write(' span.clock {font-family:verdana; font-size:10.5px; color:333333}');
                            document.write(' a {font-family:verdana; font-size:11px; COLOR:navy; text-decoration: none;}');
                            document.write(' menubar a {font-family:verdana; font-size:11px; COLOR:navy; text-decoration: none;}');
                            document.write(' menubar a:hover {COLOR:#ffffff; TEXT-DECORATION: none;}');
                            document.write(' .divnav a {font-family:verdana; font-size:11px; COLOR:navy; text-decoration: none;}');
                            document.write(' .divnav a:hover {font-family:verdana; font-size:11px; COLOR:navy; text-decoration: underline;}');
                            document.write(' a.under {font-family:verdana; font-size:11.5px; COLOR:006666; text-decoration: underline;}');
                            document.write(' a.grayed {font-family:verdana; font-size:12px; COLOR:999999; text-decoration: none;}');
                            document.write(' a:hover {COLOR:#990033; TEXT-DECORATION: none;}');
                            document.write(' a.grayed:hover {COLOR: 999999; TEXT-DECORATION: none;}');
                            document.write(' a:active {COLOR: 990033; TEXT-DECORATION: none;}');
                            document.write(' a.grayed:active {COLOR: 999999; TEXT-DECORATION: none;}');
                            document.write(' option {font-family:verdana; font-size:12px; background-color:ffffee}');
                            document.write(' input.button {font-family:verdana; width:50; font-size:11px; cursor:hand}');
                            document.write(' select {font-family:verdana; width:415; font-size:12px;}');
                            document.write(' input {font-family:verdana; width:415; font-size:12px;}');
                            document.write(' textarea {font-family:verdana; width:415; font-size:12px;}');
                            document.write('</style>');
                        }
            //-->

//--></script>

<form name="hiddenForm" onSubmit="return false">
<input type="hidden" name="emailAddress" value="bcc">
<input type="hidden" name="subjectLine" value="Conflict Check">
</form>

<form name="emailForm" method="post" enctype="text/plain">
<TABLE>
            <tr>
                  <td width="30">&nbsp;</td>
                  <td colspan="2">
                        <b class="darkslategray">Conflict Checking</b>
                  </td>
            </tr>
            <tr>
                  <td width="30">&nbsp;</td>
                  <td colspan="2">
                  </td>
            </tr>
            <tr>
                  <td width="30">&nbsp;</td>
                  <td colspan="2">
                        <hr>
                  </td>
            </tr>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Conflict check posted by:</td>
      <td><INPUT name="txt1" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Client:</td>
      <td><INPUT name="txtClient" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Industry Sector:</td>
      <td><INPUT name="txtIndSector" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Client Connections:</td>
      <td><INPUT name="txtClientConn" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Adverse Party:</td>
      <td><INPUT name="txtAdParty" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Adverse Party Industry Sector:</td>
      <td><INPUT name="txtAdPartyIS" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Adverse Party Connections:</td>
      <td><INPUT name="txtAdPartyConn" rows="1" cols="20" onchange=getbody()></INPUT></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Brief description of matter:</td>
      <td><textarea name="txtBriefDesc" rows="3" cols="15" onchange=getbody()></textarea></TD>
</TR>
<TR>
      <td width="30">&nbsp;</td>
      <td align="right">Additional Information:</td>
      <td><textarea name="txtAddInfo" rows="3" cols="20" onchange=getbody()></textarea></TD>
</TR>
<tr>
      <td width="30">&nbsp;</td>
      <td align="right">Answer requested by:</td>
      <td>
            <select name="lstAnswer" onChange=getbody()>
                  <option value>Close of business today</option>
                  <option value>Close of business tomorrow</option>
                  <option value>ASAP</option>
                  <option value>End of this week</option>                              
                  <option value>End of this month</option>
            </select>
      </td>
</tr>
<tr>
      <td width="30">&nbsp;</td>
      <td colspan="2">
            <input type="submit" onClick=update(this.form) id=submit1 name=submit1>
      </td>
</tr>
<tr>
      <td width="30">&nbsp;</td>
      <td colspan="2">
            <input type="reset" onClick="reset" id=reset1 name=reset1>
      </td>
</tr>
</TABLE>


<input type="hidden" name="Internet Related Technologies - <URL" value="http://www.irt.org/>">
</form>

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6207096
This is what I get
Subject:
               Conflict Check?BODY=Conflict Posted By:Poster%0D%0AConflict Posted
               By:Poster
         Date:
               Tue, 19 Jun 2001 17:47:02 +0200
        From:
               myemail@myserver.org
 Organization:
               myorg
           To:
               adressant@somewhere.com




txt1=Poster
txtClient=Client name
txtIndSector=sector 53
txtClientConn=none
txtAdParty=I hate you
txtAdPartyIS=
txtAdPartyConn=
txtBriefDesc=
txtAddInfo=
lstAnswer=Close of business today
submit1=Submit Query
Internet Related Technologies - <URL=http://www.irt.org
0
 

Author Comment

by:bb2000
ID: 6207120
When I use fill in the details I get the email and the subject filled in. The body section contains

Conflict Posted By:PosterConflict Posted by:Poster

What email system are you using as I am using outlook 97.


             
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6208082
Netscape  Messenger - as I told you would work :}

0
 

Author Comment

by:bb2000
ID: 6209623
Well that's all very well but I'm using outlook so how do I get that to work.

Thanks anyway
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 100 total points
ID: 6209706
As you now see you would be miles better off with a server process.

Michel
0
 

Author Comment

by:bb2000
ID: 6209840
Ok - I'll start again and try that - thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7811129
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I may recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 7812950
Me for effort
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7910012
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
points to mplungjan

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
0
 
LVL 1

Expert Comment

by:Computer101
ID: 7957722
Comment from expert accepted a answer

Computer101
E-E Admin
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 62
Read text on Table 7 46
JavaScript character count without counting spaces in Textarea (Code provided) 3 51
Textbox autocomplete using jquery in asp.net 13 44
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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-…
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…

739 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