Passing arrays from table rows to a javascript

Question

I dynamically append rows into a table using javascript functions.

Add row function:

function addrow(tableid) {
    var tablename = document.getElementById(tableid);
    var rows = tablename.rows.length;
    if (rows < 8) {  //Maximum number of rows allowed
        var newrow = tablename.insertRow(rows);
        var col = tablename.rows[0].cells.length;
        for (var i=0; i<col; i++) {
            var newcell = newrow.insertCell(i);
            newcell.innerHTML = tablename.rows[0].cells[i].innerHTML;
        }
    }
    else {
        alert(" Maximum number of rows allowed is 8");
    }
}

HTML Code (row structure) :

<tr>
<p>
  <td width="20%">
    <input class="input-group-lg" type="text" name="c_degree[]" style="width:90%"/>
  </td>
  <td width="25%">
    <input class="input-group-lg" type="text" name="c_specialization[]" style="width:90%" />
  </td>
  <td width="30%">
    <input class="input-group-lg" type="text" name="c_university[]" style="width:90%" />
  </td>
  <td width="15%">
    <input class="input-group-lg" type="number" name="c_year[]" min="1990" max="2015" />
  </td>
  <td width="10%">
    <input class="input-group-lg" type="number" name="c_marks[]" min="1" max="100" />
  </td>
</p>
</tr>

I need to pass data(these arrays) from all the dynamically created rows to an ajax script(which delivers it to the back end).

Putting a `
` inside a `
` in not valid.[See this](http://www.w3schools.com/tags/tag_tr.asp). _"A `` element contains one or more `` or `` elements."_ So basically, you want to know how to grab all this dynamic data, as an object for example? That way you can pass it to your Ajax function? — blex, Mar 19 '15 at 00:37
tag was used for css purposes(will fix it asap). I want to save the variables c_degree[0],c_degree[1] and so on in javascript variables (using a loop running for the number of rows in the table) and passing the javascript variables to the ajax function. — Manmeet S. Oberoi, Mar 19 '15 at 01:25
A quickfix specifically for my qs was [link](http://stackoverflow.com/questions/2627813/how-to-get-an-array-with-jquery-multiple-input-with-the-same-name). — Manmeet S. Oberoi, Apr 14 '15 at 00:41

blex · Accepted Answer · 2015-03-19T08:51:57.147

While using jQuery would make it easy to fetch data from a form with $.serialize(), you've got to do some work without a library. Let's make our own serialize() function, which we can use like this:

var myFormData = serialize( "myForm" ); // returns an object

Note that "myForm" could be replaced by any container, even "myTable".

Here is a try:

function serialize(formID) {
    // New object you'll be building upon
    var obj = {},
        // Other variables we're going to use
        i,l,n,isArray,isNum,val;
    // Your form's inputs
    var inputs = document.getElementById(formID).getElementsByTagName('input');
    // For each of them
    for (i = 0, l = inputs.length; i < l; i++) {
        // Get their name
        n = inputs[i].getAttribute('name');
        // Is it an array?
        isArray = n.slice(-2) == '[]';
        // Is is of type "number"?
        isNum = inputs[i].getAttribute('type') == 'number';
        // What's the value?
        val = inputs[i].value;
        // If it's an array
        if (isArray) {
            // Get rid of the "[]"
            n = n.substring(0, n.length - 2);
            // If it's the first entry, create an empty array
            if (obj[n] === undefined) obj[n] = [];
            // Push the value in it (parsed as an integer if it's a number)
            obj[n].push(isNum ? +val : val);
            // If it's a single field, just assign it
        } else obj[n] = isNum ? +val : val;
    }
    // Return the object
    return obj;
}

JS Fiddle Demo (with random data)

Note that this function will work with the inputs you provided ("text" & "number"), but would need to be completed to work with other types of inputs, such as radio buttons, select dropdowns, textareas etc. That requires extra work, but if you don't want to reinvent the wheel, you might find a fully working one on the web.

Passing arrays from table rows to a javascript

1 Answers1

JS Fiddle Demo (with random data)