循环进入表并从列内的不同输入获取值

Question

I have a Dynamic Table which can have an undefined number of rows, every row with a defined number of Columns and inside every column, always the same Input/Control, like this:

<table id='UndefinedTable'>
 <tr>
  <td><input type='text'></td> <!-- DataBase: Table Column1 -->
  <td><input type='text'></td> <!-- DataBase: Table Column2 -->
  <td><input type='date'></td> <!-- DataBase: Table Column3 -->
  <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
 </tr>
 <tr>
  <td><input type='text'></td> <!-- DataBase: Table Column1 -->
  <td><input type='text'></td> <!-- DataBase: Table Column2 -->
  <td><input type='date'></td> <!-- DataBase: Table Column3 -->
  <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
 </tr>
 <!-- This table may have an undefined number of rows -->
</table>

Also, rows can be erased (I figured a way to loop into it, by giving number values to every row, tr1, tr2, tr3, but as i said, any row can be erased by the user, also, was a really dirty solution).

I need to obtain all the values/text inside every control and send the data through ajax to a PHP File for to make an insert of every row.

I been thinking on some ways to do this, but the problem is that I don't have idea how to loop into the table and get the values of the Inputs and the TextArea.

Answer 1

If you would like a pure JavaScript approach as well you could give each input a name attribute dynamically and loop through them, putting the values into an array or a JSon object to be passed to your server using Ajax.

var inputs = document.getElementsByName('input');
var values = [];
for (var i = 0; i < inputs.length; i++) {
    values.push(inputs[i].value);
}

To give your Textbox's and Textarea's a name you can use:

.setAttribute('name', 'input');

Answer 2

You could select all of these elements with

$("#UndefinedTable input, #UndefinedTable textarea") //or this...
$("#UndefinedTable").find("input, textarea") //...alternative version

and loop through them:

$("#UndefinedTable input, #UndefinedTable textarea").each(function(){
   alert($(this).val());
});

Answer 3

SUBMIT VIA AJAX

var formDATA = {};
$("#UndefinedTable tr").each(function(k){
    var obj = {};
    $(this).find("input,textarea").each(function(i){
        obj["field"+i] = $(this).val();
    });
    formDATA["row"+k] = obj;
});

//console.log(formDATA);

if you add attribute name to input and textarea you can change this line:

obj["field"+i] = $(this).val();

with:

obj[$(this)] = $(this).val();

Now, you you can send formDATA via $.ajax() as data :

$.ajax({
    //...
    data : formDATA
    //...
})

SUBMIT LIKE FORM:

First you must change your html, like:

<form id="form1" action="/post.php" method="post">
    <table id='UndefinedTable'>
        <tr>
            <td><input type='text'></td> <!-- DataBase: Table Column1 -->
            <td><input type='text'></td> <!-- DataBase: Table Column2 -->
            <td><input type='date'></td> <!-- DataBase: Table Column3 -->
            <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
        </tr>
        <tr>
            <td><input type='text'></td> <!-- DataBase: Table Column1 -->
            <td><input type='text'></td> <!-- DataBase: Table Column2 -->
            <td><input type='date'></td> <!-- DataBase: Table Column3 -->
            <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
        </tr>
        <!-- This table may have an undefined number of rows -->
    </table>
    <input value="send" type="submit">
</form>

now the JS:

$("#form1").on("submit.block",function(e){
    e.preventDerault();
});
$("#UndefinedTable tr").each(function(k){
    $(this).find("input,textarea").each(function(i){
        $(this).attr("name","row"+k+"[field"+i+"]");
    });
});
$("#form1").off("submit.block");

---

if you post the form to a php file and use var_dump($_POST) , the script PRINT an array like:

array (size=2)
  'row0' => 
    array (size=4)
      'field0' => string 'Field1' (length=6)
      'field1' => string 'field2' (length=6)
      'field2' => string '2015-01-14' (length=10)
      'field3' => string 'row1' (length=4)
  'row1' => 
    array (size=4)
      'field0' => string 'Field1' (length=6)
      'field1' => string 'field2' (length=6)
      'field2' => string '2015-01-23' (length=10)
      'field3' => string 'row2' (length=4)