PUB98: How to Use JScript to Send Form Results as E-mail |
Q252873
The information in this article applies to:
- Microsoft Publisher 98
SUMMARY
When you upload a Web page to an Internet service provider (ISP) that does not support FrontPage Server Extensions 3.0 or later on their Web host, you must rely on scripts provided by the ISP.
The following JScript code allows you to send Microsoft Publisher form results directly to your e-mail address.
MORE INFORMATION
Microsoft provides programming examples for illustration only, without warranty either expressed or implied, including, but not limited to, the implied warranties of merchantability and/or fitness for a particular purpose. This article assumes that you are familiar with the programming language being demonstrated and the tools used to create and debug procedures. Microsoft support professionals can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific needs. If you have limited programming experience, you may want to contact a Microsoft Certified Partner or the Microsoft fee-based consulting line at (800) 936-5200. For more information about Microsoft Certified Partners, please see the following page on the World Wide Web:
For more information about the support options available from Microsoft, please see the following page on the World Wide Web:
You can insert the following script sections into the Web page using the HTML Code Fragment tool.
NOTE: These scripts work differently with different combinations of Web browsers and e-mail client software.
Some combinations, such as Netscape Navigator and Netscape Mail place the form data into the actual e-mail message. Internet Explorer 5 and Outlook 2000 attach the form data to the e-mail message as a file attachment named Postdata.att. This attachment is a text file that you can open in any word processor or text editor.
For more information about using HTML Code Fragments, click Microsoft Publisher Help on the Help menu, type How do I use HTML Code Fragments in the Office Assistant or the Answer Wizard, and then click Search to view the topics returned.
The following sample code pulls information from two single-line text boxes, one check box, and two option buttons. These form controls are used as outlined in the following table.
| Control | Name | Used for |
|---|---|---|
| Text box 1 | TEXT_1 | First and last name |
| Text box 2 | TEXT_2 | E-mail address |
| Check box | CHECK_BOX_1 | A yes or no question |
| Option button 1 | GROUP_1 | Has the value of "One" |
| Option button 2 | GROUP_1 | Has the value of "Two"* |
- Used for a set of exclusive options.
Place this HTML code fragment at the top of the page. The size of the frame does not matter, nor does its horizontal placement as long as it is above the form controls.
<script language="JavaScript">
<!--
function sendMail(form){
// This assigns the form section called "dataForm" to the
// variable "data"and allows you to use shorter references
// to the contents of that form section.
//
var data = document.dataForm
var userID = ""
// This builds the e-mail address to send the results of this
// script to your e-mail address.
// Replace <e-mail@address.com> with your actual e-mail
// address. Do not include the "<" and ">" characters as part
// of your e-mail address.
//
form.action += "<e-mail@address.com>"
// This builds the subject line with the submitter's name.
// It is important to view the properties of each form control
// on the page to note the name of each control.
// Replace <TEXT_1> with the actual name of the single-line text box,
// making sure that you also delete the "<" and ">" characters.
//
form.action += "?subject=Form from: " + data.<TEXT_1>.value
// These lines build the body of the message. As above, replace the
// the name in the "< >" with the actual name of the control and do
// not include the "<" and ">" characters with the actual name.
//
form.formBody.value += "Name: " + data.<TEXT_1>.value + "\n"
form.formBody.value += "Email: " + data.<TEXT_2>.value + "\n"
form.formBody.value += "Checked: " + data.<CHECK_BOX_1>.value + "\n"
// When dealing with option buttons, you have to check to see
// which button in the group has been selected. They are referenced
// in the order in which they were created, and they are indexed
// starting at zero. Thus, if you had three option buttons, they
// would be referenced as in the following example:
//
// data.<GROUP_1>[0] for the first button
// data.<GROUP_1>[1] for the second button
// data.<GROUP_1>[2] for the third button
//
// As with the other examples above, replace "<GROUP_1>" with the
// actual name of the group that the Option button belongs to and
// do not include the "<" and ">" characters with the actual name.
//
if (data.<GROUP_1>[0].checked) {
form.formBody.value += "One or Two: One \n\n"}
else { if (data.<GROUP_1>[1].checked) {
form.formBody.value += "One or Two: Two \n\n"}
}
}
// -->
</script>
<!-- These lines are important. You have to terminate the default <FORM>
tag that is at the begining of the Web page, and then start a new <FORM>
tag for the controls. If this is not done, this JScript cannot access the
data values in the controls that make up the form. -->
</FORM>
<FORM NAME="dataForm">
This code fragment implements the Submit and Reset buttons, and it must be placed below the form controls on the Web page. Horizontal position does matter here, so you need to preview this page to center the two command buttons.
When you preview the Web page, you may receive the following message:
The form on Page (x) does not have a Submit button. You must add a Submit button for the form to work.
If you receive this message, click OK.
This HTML code terminates the dataForm section of the Web page and then creates a form to send data as a mailto: post. The data is encoded into a multipart format to allow the JScript code to work.
Finally, the onSubmit property calls the sendMail function and sends this function the newly created form.
The actual data is compiled into the formBody object, which is sent with the e-mail message.
Lastly, we declare the start of a new <FORM>, to ensure that the default </FORM> tag that Publisher places at the end of the page has a corresponding start tag.
</FORM> <FORM NAME="mailForm" ACTION="mailto:" METHOD="post" ENCTYPE="multipart/form-data" onSubmit="return sendMail(this)"> <INPUT TYPE="hidden" NAME="formBody" VALUE=" "> <INPUT TYPE="submit" VALUE="Submit"> <input type="reset" value="Reset"> </FORM> <FORM>
NOTE: When you click the Submit button, a warning is displayed in your Web browser regarding the e-mail message you are attempting to send. Click Yes or OK to dismiss the warning.
This JScript section illustrates how to use the above coding concepts with the default Web forms. To properly use this code, it is paired with the code that implements the Submit and Reset buttons. The default form that is used is the General Response Form from the Design Gallery's Web Reply Forms collection.
To properly use this code, you must ungroup the General Response Form, and then delete the Submit and Reset buttons.
NOTE: Remember to place this code above the General Response Form.
<script language="JavaScript">
<!--
function sendMail(form){
// This assigns the form section called "dataForm" to the variable
// "data" and allows us to use shorter references to the contents of
// that form section.
//
var data = document.dataForm
var userID = ""
// This builds the e-mail address to send the results of this script
// to your e-mail address.
// Replace <e-mail@address.com> with your actual e-mail address.
// Do not include the "<" and ">" characters as part of your e-mail
// address.
//
form.action += "<e-mail@address.com>"
// This builds the subject line with the default text:
// "General Response Form submission"
//
form.action += "?subject=General Response Form submission"
// These lines build the body of the message from the predefined
// form controls in the General Response form.
//
form.formBody.value += "Address: " + data.Address_Line1.value + "\n"
form.formBody.value += "City: " + data.City.value + "\n"
form.formBody.value += "State/Prov: " + data.State_Province.value + "\n"
form.formBody.value += "Country: " + data.Country.value + "\n"
form.formBody.value += "Zip Code: " + data.Zip_PostalCode.value + "\n"
form.formBody.value += "Phone: " + data.Phone.value + "\n"
form.formBody.value += "Email: " + data.Email.value + "\n"
// This determines if any of the option buttons for the first
// question were chosen. If none were, then nothing is put into
// the e-mail message body.
//
if (data.Question1[0].checked) {
form.formBody.value += "Question1: A \n"}
else { if (data.Question1[1].checked) {
form.formBody.value += "Question1: B \n"}
else { if (data.Question1[2].checked) {
form.formBody.value += "Question1: C \n"}
}
}
// Checks question 2.
//
if (data.Question2[0].checked) {
form.formBody.value += "Question2: A \n"}
else { if (data.Question2[1].checked) {
form.formBody.value += "Question2: B \n"}
else { if (data.Question2[2].checked) {
form.formBody.value += "Question2: C \n"}
}
}
// Checks question 3.
//
if (data.Question3[0].checked) {
form.formBody.value += "Question3: A \n"}
else { if (data.Question3[1].checked) {
form.formBody.value += "Question3: B \n"}
else { if (data.Question3[2].checked) {
form.formBody.value += "Question3: C \n"}
}
}
// Checks question 4.
//
if (data.Question4[0].checked) {
form.formBody.value += "Question4: A \n"}
else { if (data.Question4[1].checked) {
form.formBody.value += "Question4: B \n"}
else { if (data.Question4[2].checked) {
form.formBody.value += "Question4: C \n"}
}
}
// Appends the comment field to the end of the message with a
// "----" separator.
//
form.formBody.value += "---- \n" + data.Comments.value + "\n"
// -->
</script>
REFERENCES
For additional information about how to use JScript, please visit the following MSDN Web site:
Additional query words: mspub pub98 scripting email
Keywords : kbdta kbhtml
Issue type : kbhowto
Technology : kbPublisherSearch kbPublisher98
Last Reviewed: December 30, 2000 |
