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 <p> inside a <tr> in not valid.See this. "A <tr> element contains one or more <th> or <td> 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
– blex, Commented Mar 19, 2015 at 0:37
<p> 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
– Manmeet S. Oberoi, Commented Mar 19, 2015 at 1:25

blex · Accepted Answer · 2015-03-19 08:51:57Z

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.

Collectives™ on Stack Overflow

Passing arrays from table rows to a javascript

1 Answer 1

JS Fiddle Demo (with random data)

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related