4

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

James Khoury
  • 21,330
  • 4
  • 34
  • 65
AlwaysANovice
  • 983
  • 4
  • 15
  • 34
  • waiting for my reputation score to go over 10 so I can add a pic of what I am asking here :P – AlwaysANovice Dec 13 '11 at 04: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 Dec 13 '11 at 04: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 Dec 13 '11 at 04:07
  • @Walahh do you need an id on each input box? – James Khoury Dec 13 '11 at 04:12
  • yes, "unique name attributes"..sorry :P ! I am new on this area...so having trouble picturing the whole thing that you said. Is it possible to provide some sample code or may be a link to tutorial? – AlwaysANovice Dec 13 '11 at 04:13
  • @James: may be I am wrong, but yes, I think I might need ID for each textbox so I know where to grab the data from. – AlwaysANovice Dec 13 '11 at 04:15
  • 1
    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 Dec 13 '11 at 04:20
  • @walahh they aren't server side generated controls so the server still won't know what to do with them right? html forms only need names to post data. in asp.net this is a unique id. – James Khoury Dec 13 '11 at 04:20
  • @Phil: my project requires that the rows are dynamically generated. I wish I could just use the post back option as I saw many examples out there. I am really stuck at this point honestly! – AlwaysANovice Dec 13 '11 at 04:24
  • @James: sorry! I think I am mixing up things in my head :/ – AlwaysANovice Dec 13 '11 at 04:25
  • 1
    @walahh I would suggest having your dynamic rows post and pull the data out the old fashioned way? http://stackoverflow.com/a/564314/684890 – James Khoury Dec 13 '11 at 04:29
  • @James: Thanks for the link, it's a great starting point for me. However, how do i collect data from all the displayed rows from the page? any suggestions (sorry if I am asking the same thing again that already had been answered here somewhere) – AlwaysANovice Dec 13 '11 at 04:40
  • @walahh try it with the code you have and find out what you get. – James Khoury Dec 13 '11 at 05:04

1 Answers1

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.

mravey
  • 4,380
  • 2
  • 21
  • 31
  • ooh! that's interesting! can you plz provide me a link to a similar example? PLEASE?! TY! – AlwaysANovice Dec 13 '11 at 04:43
  • I haven't done any ASP in a long time but this could be intersting : http://stackoverflow.com/questions/4561686/handling-arrays-of-html-input-elements-with-request-form-like-php – mravey Dec 13 '11 at 04:52