Solved

Create Email from JavaScript

Posted on 2001-06-18
33
268 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
  • 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

746 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

12 Experts available now in Live!

Get 1:1 Help Now