Getting text box value that is in the td, store in array in Javascript and passing back to PHP

Question

I have a table displayed using PHP. There are only two rows, the first row contains the headers, second row contains text box inside the td. What I am trying to do in this part of my script is for the user to enter some values, then I would like to grab the values according to the header names so that I can use them for a query.

I have created the table headers and text boxes according to how many headers there are as you can see in the codes below. This is inside one function, other parts are just the codes for the table and queries.

Now my main problem is that I want to get the values of each text box according to the headers. An example would be if the header is called Configuration and the value in the text box under that header is the user has typed in 1,5,8 . After a button click, a new PHP function would be executed. This function is the one I'm working on to get the text box values. I've tried iterating through the table cells in Javascript but I'm stuck at getting the text box values.

If possible, I would like to know how all the headers can be stored in an array in Javascript, the text box values to be stored accordingly as well. If it were in PHP it'd be something like $user_input[$header][$text_val] . Or just separate arrays would be fine as well as long as I am able to get the values that correspond to the headers so that I can use it in my query.

Note: I am using ajax's post to pass back values to my PHP file. The table is created with dynamic values so it'll be getting the values in the same PHP file and passing it back to there as well (called database.php). I saw some codes that have something to do with json_encode but I,ve never used anything that has to do with json , so if there are solutions using json, pardon me in advance and help me to explain it in simple terms.

while($row = mysql_fetch_assoc($result))
{
    $board_name = $row['board_name'];
    $header[] = $board_name;
}

foreach($header as $index => $head)
{
    $html .= "<th>$head</th>";
}

$html .= "
    </tr>
    <tr id=\"config_input\">
        <td colspan = \"3\">
            Please Key in Configuration:
        </td>";

foreach($header as $index => $head)
{
    $html .= "
    <td>
        <input type=\"text\" style=\"width: 70px\"/>
    </td>";
}

$html .= "</tr>";

EDIT, this is what I've tried so far in my external JavaScript file:

// After use has typed in input and clicked button, this function is executed
function searchConfig()
{
    var tester_type = $("#tester_type").val();
    var table = document.getElementById("searchByConfigTable");
    var headers = document.getElementById("headers");
    var text_row = document.getElementById("config_input");
    var page = "database.php";

    var board_name = new Array();
    var board_config = new Array();

    for (var i = 3, col; col = headers.cells[i]; i++) // headers
    {
        var str = col.innerHTML;
        board_name.push(str);
    }

    for (var i = 3, col; col = text_row.cells.value[i]; i++) // text_row
    {
        var str = col.innerHTML;
        board_config.push(str);
        // array has no value because it's not text box value 
        // that is stored, not sure what to do
    }

    // Not sure what to do from here on

    $.post(page, {
        tester_type : tester_type,
        action : "search_config"
        }, function(data) {
        $("div#display_board").html(data);
    });
}

Answer 1

with this code below you can get a JSON object of your headers and values. check it out:

HTML:

<table id="myTable">
<thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>comment</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input value="1" type="text"></td>
        <td><input value="name1" type="text"></td>
        <td><input value="coment1" type="text"></td>
    </tr>
</tbody>

Javascript:

var header = [];
var values = [];
var json = [];

$('#myTable').find('th').each(function() {
    header.push($(this).html());
});


$('#myTable').find('tbody > tr > td').each(function() {
    values.push($(this).find('input').val());
  str.push($(this).html());
});

for (var i in header) {
  json[i] = {};
  json[i][header[i]] = values[i];
}

console.log(json);

you can send this json object to php with AJAX

$.ajax({
    type: "POST",
    url: "file.php",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: json
}).done(function(JqXHR){
    alert(JqXHR);
});