HTML form using JavaScript - save in CSV format

bheema1990

I want to save the form using this makeFile() function.I want it to save the whole form in csv format..How can i make it read the whole file...TQ...n Am i doing it correctly?Please help me solve this problem...

Expand|Select|Wrap|Line Numbers

 function makeFile(){

var fso = newActiveXObject("Scripting.FileSystemObject");

var fileLoc = "E:\sample.csv";

var file = fso.CreateTextFile(fileLoc, true);

file.writeline();

file.Close();

alert('File created successfully at location: ' + fileLoc);

} 
 
<form name="form1" action="http://bytes.com/" method="get">

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 /> <input type="submit" value="Submit" onclick="makeFile();"/> </form> </div> </body> </html>

Nov 30 '12 #1

Subscribe Post Reply

✓ answered by Rabbit

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

11160

Dormilich

8,658

Expert Mod 8TB

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

Nov 30 '12 #2

Rabbit

12,516

Expert Mod 8TB

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.

Nov 30 '12 #3

bheema1990

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?

Dec 6 '12 #4

Rabbit

12,516

Expert Mod 8TB

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.

Dec 6 '12 #5

bheema1990

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

Dec 7 '12 #6

Rabbit

12,516

Expert Mod 8TB

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

Dec 7 '12 #7

bheema1990

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...

Expand|Select|Wrap|Line Numbers

 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..

Dec 10 '12 #8

bheema1990

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

Expand|Select|Wrap|Line Numbers

 <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>

Dec 10 '12 #9

Rabbit

12,516

Expert Mod 8TB

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?

Dec 10 '12 #10

bheema1990

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...

Dec 11 '12 #11

Rabbit

12,516

Expert Mod 8TB

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.

Dec 11 '12 #12

bheema1990

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...

Dec 11 '12 #13

Rabbit

12,516

Expert Mod 8TB

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.

Dec 11 '12 #14

bheema1990

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?

Dec 12 '12 #15

Rabbit

12,516

Expert Mod 8TB

No, you didn't answer all my questions.

What is the error code and message? I asked this question twice.

What line of code caused the error? I also asked this question twice.

Dec 12 '12 #16

bheema1990

m using notepad...so i dun see any specific error msg than error on page...The line that caused the error msg is the function loadLinkButton() on the line 345...

Dec 12 '12 #17

Dormilich

8,658

Expert Mod 8TB

The line that caused the error msg is the function loadLinkButton() on the line 345...

see post #2

Dec 12 '12 #18

Rabbit

12,516

Expert Mod 8TB

If you're not seeing any error messages, you need to use some debugging tools.

Dec 12 '12 #19

bheema1990

Dormilich..I have tried with a space between new and ActiveXObject..Still the same...it does not save the file into given path

Dec 13 '12 #20

Dormilich

8,658

Expert Mod 8TB

well, without a space I can guarantee that it never will.

Dec 13 '12 #21

jmrker

Strickly a guess, but something to try.
In your 'makeFile' function try changing this

Expand|Select|Wrap|Line Numbers

var fileLoc = "E:\\sample.csv";

Assumes sample.csv is in the root directory of the 'E' device.
Using the '\' character as is just forces the 's' to be read just as a 's' only.
Adding the escape character, '\', forces the second '\' character to be read as true character instead of an 'escaped' character.

Dec 26 '12 #22

HTML form using JavaScript - save in CSV format

✓ answered by Rabbit

Similar topics