How to save data to a (csv/txt) file from dynamically added rows to a HTML table using C#?

Question

I have a table called "newDataTable" where I am adding new rows dynamically with the help of following JavaScript:

    function addRow() 
    {
        //add a row to the rows collection and get a reference to the newly added row
        var table = document.getElementById('newDataTable');
        var lastRow = table.rows.length;
        var newRow = table.insertRow(lastRow);

        //add 6 cells (<td>) to the new row and set the innerHTML to contain text boxes

        var newCell = newRow.insertCell(0);
        newCell.innerHTML = "<label> City: </label>";

        newCell = newRow.insertCell(1);
        newCell.innerHTML = "<input type='text' name='tb_city'/>";

        newCell = newRow.insertCell(2);
        newCell.innerHTML = "<label> State: </label>";

        newCell = newRow.insertCell(3);
        newCell.innerHTML = "<input type='text' name='tb_state'/>";

        newCell = newRow.insertCell(4);
        newCell.innerHTML = "<input title='Add Row' name='addButton' type='button' value='Add' onclick='addRow()' />";

        newCell = newRow.insertCell(5);
        newCell.innerHTML = "<input title='Remove Row' name='deleteButton' type='button' value='Delete' onclick='removeRow(this)' />";
    }

So after everything this is how my page looks like: Screen Snippet of Form

Now, how can I collect the data from the textboxes and save them in a csv/txt file when the user clicks the "Submit" button (using C#)?
One obvious problem I am already seeing is that the way I am adding the rows to the HTML table will not allow me to have ID for each textbox. Is there any way working around this?

I will really appreciate any help that will allow me to save the data w/o changing the addRow() Thank you!!

waiting for my reputation score to go over 10 so I can add a pic of what I am asking here :P — AlwaysANovice
– AlwaysANovice, Commented Dec 13, 2011 at 4:03
I think you mean unique name attributes, right? They have to be unique, otherwise you're just overwriting them with each new row. You can do name=\"tb_state["+Math.Round(Math.Random()*50)]+"\", which will give each tb_state values a unique index in the tb_state array sent to the server, or alternatively keep track of the current row number you're adding (which would be preferable). Wrap a form around the table and provide a submit button, and then all you have left is the server-side code to save the data submitted. — Jared Farrish
– Jared Farrish, Commented Dec 13, 2011 at 4:05
Or, you could add AJAX to the addRow() to dynamically send each row as it's added to the table to the server. — Jared Farrish
– Jared Farrish, Commented Dec 13, 2011 at 4:07
Because you're adding new rows with JavaScript (i.e. only on the client side), you're possibly making things a bit complicated for yourself because those changes won't be reflected in the page's ViewState. Why aren't you binding a click event to the + and - buttons to add the row? It means your page posts back more often, but may make it easier to iterate over your controls. — Phil.Wheeler
– Phil.Wheeler, Commented Dec 13, 2011 at 4:20
@walahh I would suggest having your dynamic rows post and pull the data out the old fashioned way? stackoverflow.com/a/564314/684890 — James Khoury
– James Khoury, Commented Dec 13, 2011 at 4:29

mravey · Accepted Answer · 2011-12-13 04:35:09Z

3

Maybe you could try something like :

newCell.innerHTML = "<input type='text' name='tb_city[]'/>";
newCell.innerHTML = "<input type='text' name='tb_state[]'/>";

Here I just changed the name attribute of your inputs by adding [], it will post all you data in an array. So in the server side you just have to iterate through the array to get all you data.

answered Dec 13, 2011 at 4:35

mravey

4,5202 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlwaysANovice Over a year ago

ooh! that's interesting! can you plz provide me a link to a similar example? PLEASE?! TY!

mravey Over a year ago

I haven't done any ASP in a long time but this could be intersting : stackoverflow.com/questions/4561686/…

Collectives™ on Stack Overflow

How to save data to a (csv/txt) file from dynamically added rows to a HTML table using C#?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related