Link to home
Start Free TrialLog in
Avatar of paultran00
paultran00Flag for United States of America

asked on

HTML form and javascript to send form data in an xml file attached to an email of addresses from a SQL database

Hi experts, I need your help please.

We don't have a web server.  I can use VB.net 2008 or C#.net 2008.  I am using Windows 7 Professional.  I am using Internet Explorer 8.  SQL SERVER 2008.

1. For an internal company user,  I want an html form to use  javascript to send the form's data in an XML file (not save an xml file because we can't do that from client side) and attached it to an email and send it to my Outlook inbox when a user clicks the SUBMIT button.  
(I will import the email from Outlook inbox with XML attachments into SQL SERVER).

2a. For an external company user, I want to extract data from a table of field1, field2, and email addresses in SQL SERVER , then on-the-fly dynamically create an html form with these fields populated in the form, and attach it to an email of addresses from SQL SERVER and send it out.

2b. For an external company user, when they receive the email from Step 2a, I want them to fill out the form then click the SUBMIT button which sends the form's data as an XML attachment back to my Outlook inbox.
(I will import the email from Outlook inbox with XML attachments into SQL SERVER).
Avatar of lcohan
lcohan
Flag of Canada image

I know this is just part of the answer and please see here step by step details how to send formatted HTML colored email from SQL:

http://jahaines.blogspot.ca/2010/04/t-sql-tuesday-005-creating-emailing.html

Will try find an anser for second part XML related.
not save an xml file because we can't do that from client side
Yes you can

Part 1
and attached it to an email and send it to my Outlook inbox when a user clicks the SUBMIT button.  
Can only do with a server

Part 2 + 2b
You need a server

Are you asking how to do the above without a server? You need a server to do these actions but if you don't want to run your own you can look at using services from Amazon (AWS) - you can setup the services (or lambda functions) that you need and refer your forms to those services.
Avatar of paultran00

ASKER

@Julian Hansen:  I'm using IE 8.   How do I save an xml file to the local C drive so that I can later attach it to an email and send out via code?
For PART 1:

In chrome (I couldn't get it to work in IE8, 10, 11), I got it to save a .XML file in the local downloads folder but it's only saving the first field named txtCoaching_Requestor .

QUESTION: how do i save all the fields in the .xml file and write each field on a seprate line with an open xml tag before and closing xml tag after each field?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

  


encodeURIComponent(text));
 
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}


function addTextXML()
{
    document.addtext.name.value = document.addtext.name.value + ".XML"
}

</script>

<style type="text/css">
.style1 {
	font-size: xx-large;
}
.style2 {
	color: #FF0000;
}
.style3 {
	text-align: center;
}
</style>

</head>
<body>

<form name="addtext" onsubmit="download(this['name'].value, this['txtCoaching_Requestor'].value)">

<input type="hidden" name="name" value="Coaching_Data" placeholder="File Name">

<div class="style3">

<br>
<strong><span class="style1">Tutoring</span></strong><br>
<br>
<div>
</div>
<fieldset name="Group1">
<legend>Coaching Request</legend>
<br>
<table>
<tr>
<td style="height: 30px">
Requestor: <input name="txtCoaching_Requestor" type="text">&nbsp;
</td>
<td style="height: 30px">
Department: &nbsp;<select name="ddCoaching_Department" style="width: 204px; height: 27px">
<option value="1">dept1</option>
<option value="2">dept2</option>
<option value="3">dept3</option>
</select>
</td>
<td>

</td>
<td>

</td>
</tr>
<tr>
<td>
CSR First Name: 
<input name="txtCoaching_FirstName" type="text" style="width: 154px"><br>
CSR Last Name: 
<input name="txtCoaching_LastName" type="text" style="width: 154px"></td>
<td>
Vendor/Internal:&nbsp; 
<select name="ddCoaching_Vendor_Internal" style="width: 98px">
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Location/Site:<br>
&nbsp;<select name="ddCoaching_Request_Location_Site" style="width: 98px">
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select></td>
<td>
Date of Call:<br>
&nbsp;<input name="txtCoaching_DateOfCall" type="text" style="width: 131px"></td>
</tr>
<tr>
<td>
Coaching Category: <select name="ddCoaching_Category" style="width: 128px">
<option value="1">Coach Category 1</option>
<option value="2">Coach Category 2</option>
</select></td>
<td>
Coaching Sub-Category: 
<br>
<select name="ddCoaching_SubCategory" style="width: 128px">
<option value="1">Coach SubCategory 1</option>
<option value="2">Coach SubCategory 2</option>
</select></td>
<td colspan="2">
CTM ID / Grievance ID: 
<input name="txtCoaching_CtmID_GrievanceID" type="text" style="width: 59px"></td>
</tr>
<tr>
<td colspan="4">
Coaching Comments:&nbsp;
<textarea name="txtAreaCoaching_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>
</fieldset><br>

<br>
<fieldset name="Group1">
<legend>Responder</legend>
<table>
<tr>
<td>
CSR Supervisor: 
<input name="txtResponder_CsrSupervisor" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Location/Site:
<select name="ddResponder_Responder_Location_Site" style="width: 98px">
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select>&nbsp;
</td>
<td>
CSR Tenure: <select name="ddResponder_CsrTenure" style="width: 98px">
<option value="1">1 year</option>
<option value="2">2 years</option>
</select>&nbsp;
</td>
</tr>
<tr>
<td>
Coaching Valid/Invalid: 
<select name="ddResponder_ValidInvalid" style="width: 98px; height: 22px;">
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Coaching Completion Date:<br>
<input name="txtResponder_CompletionDate" type="text" style="width: 131px"></td>
<td>
Work Instructions(s) Coached:<br>
<input name="txtResponder_WorkInstructionsCoached" type="text" style="width: 348px; height: 85px;"></td>
</tr>
<tr>
<td colspan="3">
Coaching Response Comments:&nbsp;
<textarea name="txtAreaResponder_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>

</fieldset><br>
<br>
<br>
<fieldset name="Group1" style="height: 263px">
<legend>Original</legend>
<table>
<tr>
<td>
Advocate: 
<input name="txtOriginal_Advocate" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Supervisor: &nbsp;
<input name="txtOriginal_Supervisor" type="text" style="width: 209px"></td>
<td>
Site: &nbsp;
<input name="txtOriginal_Site" type="text" style="width: 209px"></td>
</tr>
<tr>
<td>
CTM ID / Grievance ID: 
<input name="txtOriginal_CtmID_GrievanceID0" type="text" style="width: 59px"></td>
<td>
&nbsp;</td>
<td>
<br>
</td>
</tr>
<tr>
<td>
Date of call:&nbsp; 
<input name="txtOriginal_DateOfCall" type="text" style="width: 159px">&nbsp; </td>
<td>
Client Code:&nbsp; 
<input name="txtOriginal_ClientCode" type="text" style="width: 109px"></td>
<td>
Member ID:&nbsp; 
<input name="txtOriginal_MemberID" type="text" style="width: 109px"><br>
</td>
</tr>

<tr>
<td colspan="3">
Coaching Opportunity:&nbsp;
<textarea name="txtAreaOriginal_CoachingOpportunity" style="width: 651px; height: 79px;"></textarea></td>
</tr>

<tr>
<td colspan="3" color="red" class="style2">
Standard = Your response is required within 72 hours of receipt of this 
notification.<br>
Member Impacting = Y</td>
</tr>

</table>
</fieldset>
<br>
<input type="submit" onClick="addTextXML();" value="Submit"><br>

</div>

</form>
</body>
</html>

Open in new window

@ paultran00,

Please consider using code tags for your code snippets. You can add code snippets by highlighting your code and clicking the CODE button in the toolbar. Code tags make the code easier to read and refer to. I have added code tags to your last post
How to save local - this involves taking the data and creating an <a> element with the link pointing to the encoded data and then triggering a click on the <a> - the user can then choose where to save the file - it is the same as downloading a file from a server instead you create the file locally and attach it to an <a> element.
Sample code here
HTML
Enter CR delimited list of values and cllick "Save To File" button to save contents of &lt;textarea&gt; to local file
<textarea id="values" class="form-control"></textarea>
<a id="saveToFile" class="btn btn-primary">Save to file</a>

Open in new window

JavaScript
<script>
$(function() {
  $('#saveToFile').click(function(e) {
    var data = document.getElementById('values').value;
    var data = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);
    var el = e.currentTarget;
    el.href = data;
    el.target = '_blank';
    el.download = 'data.txt';
  });
});
</script>

Open in new window

Working sample here
I just saw you are working on IE8 - while I understand that there are extenuating circumstances where this may be necessary as far as I am concerned the time and effort required to work around Microsoft idiosyncrasies is simply not worth it. If it works on IE that is great - if not then it is not worth pursuing. I have personally lost too many hours and cash as a result of trying to workaround Microsoft's broken software. As far as I know this should work in IE 8 - when I tried it - it wanted to go to the App Store to load the file - which is taking dumb to the level of art - but that's MS for you. The code demonstrates the principle and does work on the required platforms providing you can find a way around the App Store nonesense.
@julian hansen:  I don't understand how to implement your script and html into my code.  Please take a look at how I tried to implement your suggestions into my code below in lines 7-16  and 70-73.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="Javascript" >

$(function() {
  $('#saveToFile').click(function(e) {
    var data = document.getElementById('values').value;
    var data = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);
    var el = e.currentTarget;
    el.href = data;
    el.target = '_blank';
    el.download = 'data.txt';
  });
});

function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

  


encodeURIComponent(text));
 
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}


function addTextXML()
{
    document.addtext.name.value = document.addtext.name.value + ".XML"
}

</script>

<style type="text/css">
.style1 {
	font-size: xx-large;
}
.style2 {
	color: #FF0000;
}
.style3 {
	text-align: center;
}
</style>

</head>
<body>

<form name="addtext" onsubmit="download(this['name'].value, this['txtCoaching_Requestor'].value)">

<input type="hidden" name="name" value="Coaching_Data" placeholder="File Name">

<div class="style3">

<br>
<strong><span class="style1">Tutoring</span></strong><br>
<br>

<div>
<textarea id="values" class="form-control"></textarea>
<a id="saveToFile" class="btn btn-primary">Save to file</a>
</div>

<fieldset name="Group1">
<legend>Coaching Request</legend>
<br>
<table>
<tr>
<td style="height: 30px">
Requestor: <input name="txtCoaching_Requestor" type="text">&nbsp;
</td>
<td style="height: 30px">
Department: &nbsp;<select name="ddCoaching_Department" style="width: 204px; height: 27px">
<option value="1">dept1</option>
<option value="2">dept2</option>
<option value="3">dept3</option>
</select>
</td>
<td>

</td>
<td>

</td>
</tr>
<tr>
<td>
CSR First Name: 
<input name="txtCoaching_FirstName" type="text" style="width: 154px"><br>
CSR Last Name: 
<input name="txtCoaching_LastName" type="text" style="width: 154px"></td>
<td>
Vendor/Internal:&nbsp; 
<select name="ddCoaching_Vendor_Internal" style="width: 98px">
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Location/Site:<br>
&nbsp;<select name="ddCoaching_Request_Location_Site" style="width: 98px">
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select></td>
<td>
Date of Call:<br>
&nbsp;<input name="txtCoaching_DateOfCall" type="text" style="width: 131px"></td>
</tr>
<tr>
<td>
Coaching Category: <select name="ddCoaching_Category" style="width: 128px">
<option value="1">Coach Category 1</option>
<option value="2">Coach Category 2</option>
</select></td>
<td>
Coaching Sub-Category: 
<br>
<select name="ddCoaching_SubCategory" style="width: 128px">
<option value="1">Coach SubCategory 1</option>
<option value="2">Coach SubCategory 2</option>
</select></td>
<td colspan="2">
CTM ID / Grievance ID: 
<input name="txtCoaching_CtmID_GrievanceID" type="text" style="width: 59px"></td>
</tr>
<tr>
<td colspan="4">
Coaching Comments:&nbsp;
<textarea name="txtAreaCoaching_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>
</fieldset><br>

<br>
<fieldset name="Group1">
<legend>Responder</legend>
<table>
<tr>
<td>
CSR Supervisor: 
<input name="txtResponder_CsrSupervisor" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Location/Site:
<select name="ddResponder_Responder_Location_Site" style="width: 98px">
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select>&nbsp;
</td>
<td>
CSR Tenure: <select name="ddResponder_CsrTenure" style="width: 98px">
<option value="1">1 year</option>
<option value="2">2 years</option>
</select>&nbsp;
</td>
</tr>
<tr>
<td>
Coaching Valid/Invalid: 
<select name="ddResponder_ValidInvalid" style="width: 98px; height: 22px;">
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Coaching Completion Date:<br>
<input name="txtResponder_CompletionDate" type="text" style="width: 131px"></td>
<td>
Work Instructions(s) Coached:<br>
<input name="txtResponder_WorkInstructionsCoached" type="text" style="width: 348px; height: 85px;"></td>
</tr>
<tr>
<td colspan="3">
Coaching Response Comments:&nbsp;
<textarea name="txtAreaResponder_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>

</fieldset><br>
<br>
<br>
<fieldset name="Group1" style="height: 263px">
<legend>Original</legend>
<table>
<tr>
<td>
Advocate: 
<input name="txtOriginal_Advocate" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Supervisor: &nbsp;
<input name="txtOriginal_Supervisor" type="text" style="width: 209px"></td>
<td>
Site: &nbsp;
<input name="txtOriginal_Site" type="text" style="width: 209px"></td>
</tr>
<tr>
<td>
CTM ID / Grievance ID: 
<input name="txtOriginal_CtmID_GrievanceID0" type="text" style="width: 59px"></td>
<td>
&nbsp;</td>
<td>
<br>
</td>
</tr>
<tr>
<td>
Date of call:&nbsp; 
<input name="txtOriginal_DateOfCall" type="text" style="width: 159px">&nbsp; </td>
<td>
Client Code:&nbsp; 
<input name="txtOriginal_ClientCode" type="text" style="width: 109px"></td>
<td>
Member ID:&nbsp; 
<input name="txtOriginal_MemberID" type="text" style="width: 109px"><br>
</td>
</tr>

<tr>
<td colspan="3">
Coaching Opportunity:&nbsp;
<textarea name="txtAreaOriginal_CoachingOpportunity" style="width: 651px; height: 79px;"></textarea></td>
</tr>

<tr>
<td colspan="3" color="red" class="style2">
Standard = Your response is required within 72 hours of receipt of this 
notification.<br>
Member Impacting = Y</td>
</tr>

</table>
</fieldset>
<br>
<input type="submit" onClick="addTextXML();" value="Submit"><br>

</div>

</form>
</body>
</html>

Open in new window

1. you need to add the jQuery library
<script src="http://code.jquery.com/jquery.js"></script>

2. Lines 9 and 10 need to be replaced with the code that builds your XML file
    var data = document.getElementById('values').value;
    var data = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);

Open in new window

The above just gets the value of one element and adds it to the file for download - what you need to do is set data to the XML you want to save (line 9)
    var data = getYourXMLHere();
    var data = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);

Open in new window

Then it should work
@julian hansen: I'm following this code:  http://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file

and my question is that I can only get it to save 1 field on the form.  How do I get it to save all the fields on the form to the text file?
@julian hansen:  I figured out how to save more than 1 field from the form.  Code is below

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="Javascript" >



function download(filename1, text, text1) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
					encodeURIComponent('<tag1>' + text + '</tag1>' + '\r\n' + text1));
 
  pom.setAttribute('download', filename1);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}


function addTextXML()
{
    document.addtext.name.value = document.addtext.name.value + ".XML"
}

</script>

<style type="text/css">
.style1 {
	font-size: xx-large;
}
.style2 {
	color: #FF0000;
}
.style3 {
	text-align: center;
}
</style>

</head>
<body>

<form name="addtext" onsubmit="download(this['name'].value
					, this['txtCoaching_Requestor'].value
					, this['txtCoaching_FirstName'].value)">

<input type="hidden" name="name" value="Coaching_Data" placeholder="File Name">

<div class="style3">

<br>
<strong><span class="style1">Tutoring</span></strong><br>
<br>
</div>
<div>

</div>

<fieldset name="Group1">
<legend>Coaching Request</legend>
<br>
<table>
<tr>
<td style="height: 30px">
Requestor: <input name="txtCoaching_Requestor" type="text">&nbsp;
</td>
<td style="height: 30px">
Department: &nbsp;<select name="ddCoaching_Department" style="width: 204px; height: 27px">
<option disabled selected value> -- select an option -- </option>
<option value="1">dept1</option>
<option value="2">dept2</option>
<option value="3">dept3</option>
</select>
</td>
<td>

</td>
<td>

</td>
</tr>
<tr>
<td>
CSR First Name: 
<input name="txtCoaching_FirstName" type="text" style="width: 154px"><br>
CSR Last Name: 
<input name="txtCoaching_LastName" type="text" style="width: 154px"></td>
<td>
Vendor/Internal:&nbsp; 
<select name="ddCoaching_Vendor_Internal" style="width: 98px">
<option disabled selected value> -- select an option -- </option>
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Location/Site:<br>
&nbsp;<select name="ddCoaching_Request_Location_Site" style="width: 98px">
<option disabled selected value> -- select an option -- </option>
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select></td>
<td>
Date of Call:<br>
&nbsp;<input name="txtCoaching_DateOfCall" type="text" style="width: 131px"></td>
</tr>
<tr>
<td>
Coaching Category: <select name="ddCoaching_Category" style="width: 128px">
<option disabled selected value> -- select an option -- </option>
<option value="1">Coach Category 1</option>
<option value="2">Coach Category 2</option>
</select></td>
<td>
Coaching Sub-Category: 
<br>
<select name="ddCoaching_SubCategory" style="width: 128px">
<option disabled selected value> -- select an option -- </option>
<option value="1">Coach SubCategory 1</option>
<option value="2">Coach SubCategory 2</option>
</select></td>
<td colspan="2">
CTM ID / Grievance ID: 
<input name="txtCoaching_CtmID_GrievanceID" type="text" style="width: 59px"></td>
</tr>
<tr>
<td colspan="4">
Coaching Comments:&nbsp;
<textarea name="txtAreaCoaching_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>
</fieldset><br>

<br>
<fieldset name="Group1">
<legend>Responder</legend>
<table>
<tr>
<td>
CSR Supervisor: 
<input name="txtResponder_CsrSupervisor" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Location/Site:
<select name="ddResponder_Responder_Location_Site" style="width: 98px">
<option disabled selected value> -- select an option -- </option>
<option value="1">Division 1</option>
<option value="2">Division 2</option>
</select>&nbsp;
</td>
<td>
CSR Tenure: <select name="ddResponder_CsrTenure" style="width: 98px">
<option disabled selected value> -- select an option -- </option>
<option value="1">1 year</option>
<option value="2">2 years</option>
</select>&nbsp;
</td>
</tr>
<tr>
<td>
Coaching Valid/Invalid: 
<select name="ddResponder_ValidInvalid" style="width: 98px; height: 22px;">
<option disabled selected value> -- select an option -- </option>
<option value="V">Vendor</option>
<option value="I">Internal</option>
</select></td>
<td>
Coaching Completion Date:<br>
<input name="txtResponder_CompletionDate" type="text" style="width: 131px"></td>
<td>
Work Instructions(s) Coached:<br>
<input name="txtResponder_WorkInstructionsCoached" type="text" style="width: 348px; height: 85px;"></td>
</tr>
<tr>
<td colspan="3">
Coaching Response Comments:&nbsp;
<textarea name="txtAreaResponder_Comments" style="width: 651px; height: 79px;"></textarea></td>
</tr>
</table>

</fieldset><br>
<br>
<br>
<fieldset name="Group1" style="height: 263px">
<legend>Original</legend>
<table>
<tr>
<td>
Advocate: 
<input name="txtOriginal_Advocate" type="text" style="width: 209px">&nbsp;&nbsp;
</td>
<td>
Supervisor: &nbsp;
<input name="txtOriginal_Supervisor" type="text" style="width: 209px"></td>
<td>
Site: &nbsp;
<input name="txtOriginal_Site" type="text" style="width: 209px"></td>
</tr>
<tr>
<td>
CTM ID / Grievance ID: 
<input name="txtOriginal_CtmID_GrievanceID0" type="text" style="width: 59px"></td>
<td>
&nbsp;</td>
<td>
<br>
</td>
</tr>
<tr>
<td>
Date of call:&nbsp; 
<input name="txtOriginal_DateOfCall" type="text" style="width: 159px">&nbsp; </td>
<td>
Client Code:&nbsp; 
<input name="txtOriginal_ClientCode" type="text" style="width: 109px"></td>
<td>
Member ID:&nbsp; 
<input name="txtOriginal_MemberID" type="text" style="width: 109px"><br>
</td>
</tr>

<tr>
<td colspan="3">
Coaching Opportunity:&nbsp;
<textarea name="txtAreaOriginal_CoachingOpportunity" style="width: 651px; height: 79px;"></textarea></td>
</tr>

<tr>
<td colspan="3" color="red" class="style2">
Standard = Your response is required within 72 hours of receipt of this 
notification.<br>
Member Impacting = Y</td>
</tr>

</table>
</fieldset>
<div class="style3">
<br>
<input type="submit" onClick="addTextXML();" value="Submit"><br>

</div>

</form>
</body>
</html>

Open in new window

The .XML file is sucessfully saved to the local C drive downloads folder.  

PROBLEM is that if a user clicks SUBMIT more than once, subsequent files look like this:  Coaching_Data (1).XML , Coaching_Data (2).XML

QUESTION: How do I delete the file Coaching_Data.XML  before I write so that we don't get Coaching_Data (1).XML , Coaching_Data (2).XML
You have to build up the string that you want saved.

It won't do it automatically - you need to fetch each value on the form and then add it to the output string.

It appears you want an XML output - you will need to create that yourself - here is an example on how to create a comma separated list of values from your file.

I am seeing some confusion in your code. You have included the Save To File button and you have an onsubmit handler - I don't know what it is you want to do with this code so I am only going to deal with the bit saving to file.

This updated code demonstrates how to get all the data from the form as an array - iterate over the array and create a comma separated list of values from the form that gets saved. You will need to modify to achieve the format you want.
$(function() {
  $('#saveToFile').click(function(e) {
        // Get the data from the form as an array
	var formdata = $('form').serializeArray();

	var rawdata = '';

        // Iterate over the array and create a string made up
        // of comma separated values 
	for(var i = 0; i < formdata.length; i++) {
		rawdata += formdata[i].name + ',' + formdata[i].value + "\n";
	}

    // Encode the string for embedding in the link
    var data = 'data:application/csv;charset=utf-8,' + encodeURIComponent(rawdata);

    // get the <a> element that was clicked
    var el = e.currentTarget;

    // set its href to the data we just extracted
    el.href = data;

    // Set the _target attribute
    el.target = '_blank';

    // set the download name - change this to be what you want the file to be called.
    el.download = 'data.txt';
  });
});

Open in new window

How do I delete the file Coaching_Data.XML
You can't - you don't have control over the file system. What we are doing here is tricking the browser into thinking it is doing a file download. We have no control over where that file is saved or what name it is saved under - that is all in the hands of the user - same as if they had clicked on a link on a web page that resulted in a download.
@Julian Hansen:  Sorry, I don't know how to use the function you offered. Can you give an example of how to use your function within a HTML file with the form so I can see how it's called from the SUBMIT button?
Instead of this
<input type="submit" onClick="addTextXML();" value="Submit"><br>
<a id="saveToFile">Submit</a>
And style it to look like a button. Then call the addTextXML() from the function I gave you.

You need to understand how this code works.

When you click on the saveToFile button (which is an <a>) you are modifying the default behaviour of the <a> element and making it behave like a file download link.

To do that with an <input> is far more complicated.

As the form is not being submitted anywhere you don't need a submit button in the form of <input type="submit">

All you need is a button that LOOKS like a submit button but is actually an <a> element styled to look like a button.

You then link the code I gave you to that button and inside the code call the addToXML() function to build your XML string which you then use as the data element in the rest of the function.

I don't have time to work on a full solution now - but you are nearly there with what you have once you sort out the <a> / submit button story. Give it a go and if you are still stuck I will pick up tomorrow.
@Julian Hansen: In PART 1, How do i use javascript to attach the .XML file to Outlook email and send it out immediately?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@Julian Hansen:  OK, maybe this idea with html wasn't the solution.  

What would be the solution to use an Excel form instead?  For my internal user, can Sharepoint create a form to enter data into SQL SERVER?   For my external user, is there VB.Net or C#.net Windows Form code that can pull data from Sharepoint/SQL SERVER then populate the data into an Excel file so I can email it to the external user and they would fill it out and email back to my inbox?
can Sharepoint create a form to enter data into SQL SERVER

That falls outside the scope of this question. Your OP did not include the Sharepoint topic area - which is unfortunately not my area of expertise. I believe it can be done but I cannot give you details.

My advice is to open another question around your Sharepoint question and include the Sharepoint TA.
@paul,

Do you still require assistance with this question? If so post back here otherwise please can you close the question.

JulianH