Link to home
Start Free TrialLog in
Avatar of shragi
shragiFlag for India

asked on

html form to write data to csv

Hi - I am building a csv file with the below format

Name,23,2000,00000,123
Name2,24,3000,00000213,123341

I dont want users to enter data in CSV so want to build an HTML so that they can enter the data for the fields and when they save it the data is stored in csv as a new line. I am a java developer I know how to do this in Java using MVC pattern.
But I am not an expert in perl or front end, so how to create a HTML using (perl/javascript/jquery) so that the data entered by users in HTML is stored in csv file.

Thanks,
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Here is a  Javascript solution. Hope gives good head start to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form 2 CSV</title>
</head>
<script type="text/javascript">
    function Save2CSV(form) {
        var str="";
        var flds = form.elements;
        var csvFld=null;
        for (fx=0; fx < flds.length; fx++) {
            var fld = flds[fx];
            if (fld.type == "button") { continue; }
            var fldName  = fld.getAttribute("name");
            var fldValue = fld.value;
            if ((fld.type=="radio") || (fld.type == "checkbox")) {
                if (!fld.checked) { continue; }
            }
            if (fld.type=="select") {
                if (!fld.selected) { continue;}
            }
            if (fld.getAttribute("name") == "csvdata") {
                csvFld = fld;
                continue;
            }
            str += fld.getAttribute("name") + ":" + fld.value + ",";
        }
        str = str.replace(/,$/,"");
        if (csvFld != null) {
            csvFld.value = str;
        }
        return false;
    }
</script>
<body>

<form name="Form1">
    <br/><input type="text" name="field1" value="text field">
    <br/><input type="password" name="password" value="password">
    <br/><input type="checkbox" name="chkBox1" value="CheckValue1">Option 1 <input type="checkbox" name="chkBox1" value="CheckValue2">Option 2
    <br/><input type="radio" name="radio1" value="RadioValue1">Radio Option 1 <input type="radio" name="radio1" value="RadioValue2">Option 2
    <br/>
            <select name="select1">
                <option value="selOpt1">Select Option 1</option>
                <option value="selOpt2">Select Option 2</option>
                <option value="selOpt3">Select Option 3</option>
                <option value="selOpt4">Select Option 4</option>
            </select>
    <br/><textarea name="csvdata" rows="5" cols="50"></textarea>
    <br/><input type="button" name="submit" value="Submit" onclick="Save2CSV(this.form);">

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

Open in new window

Avatar of shragi

ASKER

Hi Pravin - Thank you for the solution, that's a gud start for what I am trying to do, but how do you save it to CSV.
In the code the output is displayed to the textarea.

Thanks,
This is mainly why you did not got an answer soonest because client side, browser don't let you save file on people computer.
This is a server side job and after that, people download the file with their browser.
You may use ActiveX on MS Internet Explorer but it's not an easy process and not available on other browsers.
greetings shragi , , , , You tell us that you need the form inputs filled by user and changed into CSV text, and then you need that CSV text information saved for a longer time than the Browser page exists, (like saved to file or database storage). Can you tell us MORE about the other stages in your CSV information storage and use. Can you tell us how the saved CSV info will be used? Will the info be read from your Server? or just needed as user "local computer" access, or some other "save and access" point? ? What are you needing the CSV info for later, when you use (read) the CSV values ? ?
Avatar of shragi

ASKER

Hi Slick - CSV file (or text file) is an input file to another program.
So the file stays in one location all the time. There are no servers.
I am using perl script to read/parse the CSV file for other program.
As of now if i want to update the this CSV file to alter another program I will open the csv file and edit it but I want to provide UI to edit this.

Thanks
@leakim971, That is not exactly true...

Here is fiddle showing how from come code I found on SO:
https://jsfiddle.net/fu24t1oc/1/

It takes an HTML Table and saves it to the client as CSV FILE.
perfect, good catch!
Avatar of shragi

ASKER

Hi Eddie - I see that you are generating a new csv file, but i want to update an existing one.
Also don't bother that it needs to be CSV the file can be txt file also but the data is comma delimeted.
All in all i am trying to use file as a database.
I want to read and write into it.
OK, you say this -
    "I am using perl script to read/parse the CSV file for other program"
So the database "file" storage is in "another program", , you have some javascript code here (this question) that shows how to read some TEXT INPUTS on a web page, , BUT unless you know how to use the "perl script" to read the other program's CSV storage and then just add the new line text from inputs to the retrieved TEXT and then save that back to the "other program", then the experts will need to see "How" this perl script you use does the methods for getting and saving the CSV TEXT. Can you show or tell us about the perl script used or about the "other program", so we might "look up" how to access CSV storage"  (ajax I guess?) for the CSV you use?
Avatar of shragi

ASKER

Hi SLick - I might have confused you, here is the step by step of what i am doing curently

1) Create testfile.txt file manually
2) read that file using perl script to do other functions, i am reading the file as below (just showing you sample code)

my $fodlerList = "C:/Users//Desktop//Projects//testfile.txt";
my $conditionFile = "C://Users//Desktop//Projects//condiList.csv";
open(my $data, '<', $fodlerList) or die "Could not open '$fodlerList' $!\n";
tie @condiLinesFile, 'Tie::File', $conditionFile or die "could not tie $conditionFile $!";
while (my $line = <$data>) 
{
  chomp $line;
  my @fields = split "," , $line;
  #get the job name of the line
  my $myName = $fields[0];  
# get other fields and do some manipulations here and update the $conditionFile 
}

Open in new window


I am all done with step2 but for step 1 which is used as input and where i am creating testfile.txt
I want to provide User interface to users, so that they can create this testfile.txt in browser instead of opening the file directly.
Don't get confused with CSV file, the data in testfile.txt is comma delimited so it can be saved as text or csv doesn't matter because in step2 i am splitting the content with ","
So sorry, , ,but I have never done a perl that uses a HTML that the "User" sees in a browser, to access the command line perl. Don't have a clue how to do that?
Avatar of shragi

ASKER

Hi SLick - let me make it simple, ignore what i said I will do this one step at a time.
Can you tell me how to read a txt file line by line into HTML.

Example:
Name,23,2000,00000,123
Name2,24,3000,00000213,123341, 45678

When I read line one I see 5 values and line 2 has 6 values.
So I want to read this file line by line
and the first value should be in drop down.

Drop down button - showing Name, Name2
If I select Name - it should display values 23, 2000,00000,123 in 4 text fields.
If i select Name2 in drop down - it should display 24,3000,00000213,123341, 45678 in 5 text fields.

if this is done I think I will work out another strategy to edit these values.

Thanks
Avatar of shragi

ASKER

similar to this but the data comes from file

http://jsfiddle.net/sarawagiakash/qytdu1zs/6/
Looks like you are on the track to get help from others.

What I showed was to convert  nagviate form dom to csv, and then  you can do what ever you want at server.

I get it, you want to save CSV. But was not clear at server or client side.

Anyway let me ask basic question, why not save "JSON" format, which is much easy to build and parse.

function saveTable(thisForm){
      var postData = JSON.stringify(thisForm.serializeObject());
}
Avatar of shragi

ASKER

Hi Pravin - I wan to save to existing file from client side not server.
JSON works for me, if it is simple text file also works for me.
All i want is save it to a file.
But in your code I did not see you mentioning any path to the file to save.
The only way to do what you are asking is to upload the current file, modify it then save it back.
SOLUTION
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America 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
ASKER CERTIFIED SOLUTION
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
Why save the file on the client when the OP wants it on the server?
Avatar of shragi

ASKER

Hi Pravin - This is exatly what I want but with there are couple of changes while saving to CSV

1) How can I modify exisitng csv ? the current code you gave only creates new one csv with the new entry but how can get the old entries in the old csv.
2) Also how can I add multiple values at a time ?

Thanks
Looks like you closed the question.

>> About saving previous value and new value.

As you see the the text after reading file is available as JavaScript variable.
New Value  of string is generated by user action.
So far as you are able to distinguish between old and new variable, it should work fine.
At the the of write, you can dump both.

Thanks for the points

Happy Holidays!
Avatar of shragi

ASKER

Hi Pravin - I closed the question because you answered the scope of the question and my other questions are not in initial scope, I thought it would be nice to open another ticket than in this.

But as you responded I have a question
what do you mean by
So far as you are able to distinguish between old and new variable, it should work fine.
Can you make changes to the script and show.

Thanks,
See the attached for how to

1. Save Form 2 CSV (see the append of old string and new strings)
2. Read File at Client side
3. Load CSV 2 Form

Ideally you could have opened another question,
Hope this helps
form2csv.html