HTML form using JavaScript - save in CSV format

**Dormilich** · Nov 30 '12, 07:03 AM

in line #2 you need a space between new and ActiveXObject.

**Rabbit** · Nov 30 '12, 04:29 PM

This is going on a website correct? You can't do this. Javascript does not and should not have access to the client system because of the security risk it poses.

**bheema1990** · Dec 6 '12, 03:38 AM

no its not goin to be a website...It will be used internally,so security issue wont be a problem...How can i make it read all the input to the form and when i click the save button,it automatically save to a share drive in csv format...can u guys help me with this?

**Rabbit** · Dec 6 '12, 04:25 PM

Did you put in Dormilich's fix above? Also, I noticed that you didn't actually give it anything to write when you called the writeLine method. It's just going to write a blank line unless you tell it what you want to write.

**bheema1990** · Dec 7 '12, 06:39 AM

How can i make it display the whole content inisde the div tag that i have used in form...?

**Rabbit** · Dec 7 '12, 04:57 PM

You can use the document.getEle mentById() method to get the div element. You can use the innerHTML property of the element to get what's inside.

**bheema1990** · Dec 10 '12, 02:05 AM

Thanks Rabbit...i've already tried and its not working...i think something wrong with my coding...can u help me with the code..i'l just post it here...

Code:

function makeFile(){
var fso = newActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\sample.csv";
var file = fso.OpenTextFile(fileLoc, true);
file.write(escape(document.getElementById("myOutput").innerHTML));
file.Close();
alert('File created successfully at location: ' + fileLoc);

myOutput id the div tag id....can u help me to fix this code..tq..

**bheema1990** · Dec 10 '12, 08:40 AM

Sorry for the long post...This is my full code...Can u help me with this...

Code:

<html>
<head>
<title>E-LogBook</title>

<center>
<color><font size="35">KM1 FCPGA TEST AREA OUTPUT TRACKING FORMAT</font></color>
</center>
<br/>
<br/>
<br/>

<SCRIPT TYPE="text/javascript">

 function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  
  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
  
  // insert cell
  var cellRight1 = row.insertCell(2);
  var el1 = document.createElement('input');
  el1.type = 'text';
  el1.name = 'txtRow' + iteration;
  el1.id = 'txtRow' + iteration;
  el1.size = 40;
  
  el1.onkeypress = keyPressTest;
  cellRight1.appendChild(el1);
  
   // insert cell
  var cellRight2 = row.insertCell(3);
  var el2 = document.createElement('input');
  el2.type = 'text';
  el2.name = 'txtRow' + iteration;
  el2.id = 'txtRow' + iteration;
  el2.size = 40;
  
  el2.onkeypress = keyPressTest;
  cellRight2.appendChild(el2);
  
   // insert cell
  var cellRight3 = row.insertCell(4);
  var el3 = document.createElement('input');
  el3.type = 'text';
  el3.name = 'txtRow' + iteration;
  el3.id = 'txtRow' + iteration;
  el3.size = 40;
  
  el3.onkeypress = keyPressTest;
  cellRight3.appendChild(el3);
  
  // insert cell
  var cellRight4 = row.insertCell(5);
  var el4 = document.createElement('input');
  el4.type = 'text';
  el4.name = 'txtRow' + iteration;
  el4.id = 'txtRow' + iteration;
  el4.size = 40;
  
  el4.onkeypress = keyPressTest;
  cellRight4.appendChild(el4);
  
  // insert cell
  var cellRight5 = row.insertCell(6);
  var el5 = document.createElement('input');
  el5.type = 'text';
  el5.name = 'txtRow' + iteration;
  el5.id = 'txtRow' + iteration;
  el5.size = 40;
  
  el5.onkeypress = keyPressTest;
  cellRight5.appendChild(el5);
  
  // insert cell
  var cellRight6 = row.insertCell(7);
  var el6 = document.createElement('input');
  el6.type = 'text';
  el6.name = 'txtRow' + iteration;
  el6.id = 'txtRow' + iteration;
  el6.size = 40;
  
  el6.onkeypress = keyPressTest;
  cellRight6.appendChild(el6);
  
  // insert cell
  var cellRight7 = row.insertCell(8);
  var el7 = document.createElement('input');
  el7.type = 'text';
  el7.name = 'txtRow' + iteration;
  el7.id = 'txtRow' + iteration;
  el7.size = 40;
  
  el7.onkeypress = keyPressTest;
  cellRight7.appendChild(el7);
  
  // insert cell
  var cellRight8 = row.insertCell(9);
  var el8 = document.createElement('input');
  el8.type = 'text';
  el8.name = 'txtRow' + iteration;
  el8.id = 'txtRow' + iteration;
  el8.size = 40;
  
  el8.onkeypress = keyPressTest;
  cellRight8.appendChild(el8);
  
 
}
function keyPressTest(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  
  // submit
  frm.submit();
}
function validateRow(frm)
{
  var chkb = document.getElementById('chkValidate');
  if (chkb.checked) {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
    var i;
    for (i=1; i<=lastRow; i++) {
      var aRow = document.getElementById('txtRow' + i);
      if (aRow.value.length <= 0) {
        alert('Row ' + i + ' is empty');
        return;
      }
    }
  }
  openInNewWindow(frm);
}

function addRowToTable2()
{
  var tbl = document.getElementById('tbl');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
  
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
  
  el.onkeypress = keyPressTest2;
  cellRight.appendChild(el);
  
  // insert cell
  var cellRight1 = row.insertCell(2);
  var el1 = document.createElement('input');
  el1.type = 'text';
  el1.name = 'txtRow' + iteration;
  el1.id = 'txtRow' + iteration;
  el1.size = 40;
  
  el1.onkeypress = keyPressTest2;
  cellRight1.appendChild(el1);
  
   // insert cell
  var cellRight2 = row.insertCell(3);
  var el2 = document.createElement('input');
  el2.type = 'text';
  el2.name = 'txtRow' + iteration;
  el2.id = 'txtRow' + iteration;
  el2.size = 40;
  
  el2.onkeypress = keyPressTest2;
  cellRight2.appendChild(el2);
  
   // insert cell
  var cellRight3 = row.insertCell(4);
  var el3 = document.createElement('input');
  el3.type = 'text';
  el3.name = 'txtRow' + iteration;
  el3.id = 'txtRow' + iteration;
  el3.size = 40;
  
  el3.onkeypress = keyPressTest2;
  cellRight3.appendChild(el3);
  
  // insert cell
  var cellRight4 = row.insertCell(5);
  var el4 = document.createElement('input');
  el4.type = 'text';
  el4.name = 'txtRow' + iteration;
  el4.id = 'txtRow' + iteration;
  el4.size = 40;
  
  el4.onkeypress = keyPressTest2;
  cellRight4.appendChild(el4);
  
  // insert cell
  var cellRight5 = row.insertCell(6);
  var el5 = document.createElement('input');
  el5.type = 'text';
  el5.name = 'txtRow' + iteration;
  el5.id = 'txtRow' + iteration;
  el5.size = 40;
  
  el5.onkeypress = keyPressTest2;
  cellRight5.appendChild(el5);
  
  
 
}
function keyPressTest2(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
function removeRowFromTable2()
{
  var tbl = document.getElementById('tbl');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
   
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  
  // submit
  frm.submit();
}
function validateRow2(frm)
{
  var chkb = document.getElementById('chkValidate');
  if (chkb.checked) {
    var tbl = document.getElementById('tbl');
    var lastRow = tbl.rows.length - 1;
    var i;
    for (i=1; i<=lastRow; i++) {
      var aRow = document.getElementById('txtRow' + i);
      if (aRow.value.length <= 0) {
        alert('Row ' + i + ' is empty');
        return;
      }
    }
  }
  openInNewWindow(frm);
}
/*function SaveDocument(){

  		var fso = new ActiveXObject("Scripting.FileSystemObject");
  		var f = fso.CreateTextFile("C:\sample.csv", true);
  		f.write(myOutput.innerHTML);
  		f.Close();
  		sPersistValue=myOutput.innerHTML;}
  	catch(e){
  		var sCancel="true";
  		return sCancel;}
	myOutput.focus();	
  }	*/
  
  
/*function makeFile(){
var fso = newActiveXObject("Scripting.FileSystemObject");
var fileLoc = "E:\sample.csv";
var file = fso.OpenTextFile(fileLoc, true);
file.write(escape(document.getElementById("myOutput").innerHTML));
file.Close();
alert('File created successfully at location: ' + fileLoc);
} */
function loadLinkButton(){
  var fso = newActiveXObject("Scripting.FileSystemObject");
  var fileLoc = "C:\sample.csv";
  var file = fso.OpenTextFile(fileLoc, true);
  var file = document.getElementById("myOutput").innerHTML;
  // I used this online encoder to create the data url.
  // axx.href = 'data:text/csv;base64,MTsyOzQ=';  // This was my first test, not having the encoder. 
  
}


</SCRIPT>
</head>
<body>


<form='form1' action="#" method="post">
<div id ="myOutput" style="border:1px solid black">

TESTER  <input type="text"/>	 					DATE  <input type="text" />		EMP NO  <input type="text" />	6S DONE  <input type="text" />

<br />
<br />

WW  <input type="text" size="8"maxlength="8"/>		NAME  <input type="text" />		SHIFT  <input type="text" />

<br />
<br />
<br />

PASSOVER (Please verify Summit Receipe & Storm before start shift)

<br />
<br />
<br />


 Summit Receipe OK ?  					
<select name=""> 						
   <option value="" style="display:none;"></option>		
  <option value="Yes">Yes</option>				
  <option value="No">No</option>				
 </select>						

<br />
<br />
	
 Motif/ Storm OK ?   					
 <select name=""> 						
     <option value="" style="display:none;"></option>		
    <option value="Yes">Yes</option>				
    <option value="No">No</option>				
   </select>						
	
<br />
<br />
<br />

<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Delete" onclick="removeRowFromTable();" />
</p>
<p>
</p>

<table border="1" id="tblSample">
  <tr>
<TH>Num</TH>
<TH>Lot Number</TH>
<TH>Location</TH>
<TH>Total In</TH>
<TH>1 * Test</TH>
<Th>2 * Test</TH>
<TH>3 * Test</TH>
<TH>Total Out</TH>
<TH>Lot Status</TH>
<TH>Remark</TH>
  
  </tr>
</table>

<br />
<br />
<br />
<input type="button" value="Add" onclick="addRowToTable2();" />
<input type="button" value="Delete" onclick="removeRowFromTable2();" />
</p>
<p>
</p>
<table border="1" id="tbl">
  <tr>
<TH>Num</TH>
<TH>Entry</TH>
<TH>Down</TH>
<TH>Up</TH>
<TH>Failure Mode/ Action/ Remark</TH>
<Th>D/T</TH>
<TH>Attended By</TH>

  </tr>
</table>
<br />
<br />

<button id="linkButton" onclick="loadLinkButton();">Save</button>
</div>


</form>

</body>
</html>

**Rabbit** · Dec 10 '12, 04:43 PM

Just saying it works and posting hundreds of lines of code doesn't tell me anything. You have to tell me what doesn't work. Are you getting errors? What are the error codes and messages? What line caused the error? Is it not doing what you expect? What is it doing instead? What is the correct output?

**bheema1990** · Dec 11 '12, 12:20 AM

It works fine but...if u take a look at the function makeFile()...i used activeXobject as u stated in ur previous answer but still i am facing problem when i click the save button..it states there error on the page...i hope to save this file in local drive...Sry for posting the whole code...try copy paste and run it...u can see my problem clearly...

**Rabbit** · Dec 11 '12, 04:31 AM

You said it works fine. But then right away you say it doesn't work.

You say there's an error but you don't tell us what the error is.

You're not giving me a whole lot to work with.

Also, I'm not going to run code without looking through it first. And I'm not about to read hundreds of lines of code when you can easily tell me what the error message is and what line causes the error.

**bheema1990** · Dec 11 '12, 06:39 AM

The thing is,i want to save this whole input form in local drive....n i dun knw how to do that...I dont knw how to use activeXobject method...I want to save this file in csv format in the particular given path...When i open back i want to view al; the inputs that have been key in...so,can u help me with that...

**Rabbit** · Dec 11 '12, 04:27 PM

You've already said that, you keep repeating stuff I already know. And you keep ignoring my questions.

Please reread and answer the questions in posts #10 and #12.

**bheema1990** · Dec 12 '12, 01:48 AM

ALright...It giving errors when i click on the save button,it does not save in the path that i have specified...i can key-in inputs..no prob with that...But it is not doing as i expected...it just states error on the page...The save function is not working properly...The correct output should be,when i click on the save button after i key-in all the details inside the form,it should save to the specified path in the local drive...Did i answered all your questions?

HTML form using JavaScript - save in CSV format

HTML form using JavaScript - save in CSV format

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment