Amina Ringim Amina Ringim - 1 year ago 50
Javascript Question

Create a form that uses javascript to open default mail application and attach files

I'm relatively new to scripting so please bare with me if I'm making silly mistakes. I was asked to create a script that takes values from a form and files entered by the user. Which then has a submit button that opens the default mail application on the client's computer and populates the email body with values retrieved from the form in a structured manner.

I have been able to create a form that somewhat does all that except take the files uploaded by the user and attach them to the default mail application.
I have searched everywhere on the internet and I have no luck! Can someone please help me perfect this. I have been lost for almost 3 weeks now!

Below is the entire code I have written including the form:



<script type="text/javascript">

function update_message_body() {
var file = document.input_form.file.value;
var awb = document.input_form.awb.value;
var dtsnr = document.input_form.dtsnr.value;
var incoterms = document.input_form.incoterms.value;
var TypeOfGoods = document.input_form.ToG.value;
var DescriptionOfGoods = document.input_form.DoG.value;
var quantity = document.input_form.quantity.value;
var UnitMeasure = document.input_form.um.value;
var ValueOfGoods = document.input_form.VoG.value;
var TotalWeight = document.input_form.tw.value;
var ClearingAgent = document.input_form.ca.value;
var DEtoCA = document.input_form.DEtoCA.value;
var CDUNHRD = document.input_form.CDUNHRD.value;

document.proxy_form.Information.value =
"\n" + "\n" + "This email is to inform you of the details acquired from new record :" + "\n" + "\t Uploaded Attachment :" + file + "\n" + "\t AWB :" + awb + "\n" + "\t Date and time shipping notification recieved :" + dtsnr + "\n" + "\t Incoterms :" + incoterms + "\n" + "\t Types of Goods :" + TypeOfGoods + "\n" + "\t Description of Goods :" + DescriptionOfGoods + "\n" + "\t Quantity :" + quantity + "\n" + "\t Unit Measure :" + UnitMeasure + "\n" + "\t Value of Goods :" + ValueOfGoods + "\n" + "\t Total Weight :" + TotalWeight + "\n" + "\t Clearing Agent :" + ClearingAgent + "\n" + "\t DE set to Clearing Agent :" + DEtoCA + "\n" + "\t When cargo is delivered to UNHRD :" + CDUNHRD + "\n" + "\n" + "\n" + "\n" + "Sincerely,\n";

} < /script>

<style> .dotted {
border-style: dotted;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
</style>

<!DOCTYPE html>
<html>

<body>
<form name="input_form">
<table class="dotted">
<tr>
<td>Attachment:
<input type="file" name="file" maxlength=50 allow="file_extension">
</td>
</tr>
<tr>
<td>AWB:
<input name="awb" type="text" pattern="[0-9]{9}" required>
</td>
</tr>
<tr>
<td>Date and time shipping notification recieved:
<input name="dtsnr" type="datetime-local" required>
</td>
</tr>
<tr>
<td>
Incoterms:
<select name="incoterms" required>
<option>CIF</option>
<option>DAP</option>
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
<option>JKL</option>
</select>
</td>
</tr>
<tr>
<td>
Types of Goods:
<select name="ToG">
<option>Biscuit</option>
<option>Tent</option>
<option>Car</option>
<option>Medical Kit</option>
</select>
</td>
</tr>
<tr>
<td>Description of Goods:
<input type="text" placeholder="Description of Goods" required name="DoG">
</td>
</tr>
<tr>
<td>Quantity:
<input type="text" pattern="{9}" name="quantity" required>
</td>
</tr>
<tr>
<td>
Unit Measure:
<select name="um" required>
<option>EA</option>
<option>BX</option>
<option>Pallet</option>
<option>20' container</option>
<option>40' container</option>
</select>
</td>
</tr>
<tr>
<td>Value of Goods:
<input type="text" pattern="{9}" name="VoG" required>
</td>
</tr>
<tr>
<td>Total Weight:
<input type="text" pattern="{9}" name="tw" required>
</td>
</tr>
<tr>
<td>Clearing Agent:
<input type="text" name="ca" required>
</td>
</tr>
<tr>
<td>DE set to Clearing Agent:
<input type="date" name="DEtoCA" required>
</td>
</tr>
<tr>
<td>When cargo is delivered to UNHRD:
<input type="date" class="textbox" name="CDUNHRD" required>
</td>
</tr>
</table>
</form>
<form name="proxy_form" method="post" enctype="text/plain" action="mailto:?subject=Inbound Form" onSubmit="return update_message_body();">

<input type=hidden name="Information">
<input type=submit value="send mail">

</form>
</body>

</html>




Answer Source

I'm 99.999% certain you can't do that. You can set a recipient, subject, certain headers, and body text, but not attachments; there's nothing about attachments in the RFC for the mailto: protocol, for instance, and teh only place it mentions the word "file" (in one of the example) appears to be an editing error and is unrelated to attaching files.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download