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>
