How to POST js Table cell values to PHP and INSERT to MYSQL database

Question

I have an Dynamic HTML table I am simply calling the id using JavaScript, looping through the data and capturing the cell values.

Question- How do I take this data POST it to test save.php page to insert the entire table into my MySQl db ?

    var table = document.getElementById('table'), 
    rows = table.getElementsByTagName('tr'),
    i, j, cells, OS_d,roleApp_d,Men_d,vcpu_d,Val_d,Per_d,hw_d ;

    for (i = 1, j = rows.length; i < j; ++i) {
    cells = rows[i].getElementsByTagName('td');
    if (!cells.length) {
    continue;
    }

    OS_d = cells[1].firstChild.value;
    roleApp_d = cells[2].firstChild.value;
    vcpu_d = cells[3].firstChild.value;
    Men_d = cells[4].firstChild.value;
    Val_d = cells[5].firstChild.value;
    Per_d = cells[6].firstChild.value;
    hw_d = cells[7].firstChild.value;

    }

--- Section where assistance is required

    $.ajax({
    type: "POST",
    url: 'Save.php',
    data: ({data:OS_d, roleApp_d, vcpu_d, Men_d, Val_d, Per_d, hw_d}),
    success: function(data) {
    alert(data);
    }
    });

PHP Side Save.php

    <?php
    $test = $_POST['data'];
    echo $test;
    ?>

There's no PHP code here, it's unclear what you're asking. Post the contents of your save.php and describe what's not working. — Alex Howansky, Jan 22 '20 at 17:00
You already have the data. Now you need to submit it using AJAX or Fetch API. — Cadu De Castro Alves, Jan 22 '20 at 17:06
@CaduDeCastroAlves i will try. I just have been trying Ajax and its not working out I really dont know how. Any Sample steps you can provide — Nigel Charles, Jan 22 '20 at 17:10
Take a look [here](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Cadu De Castro Alves, Jan 22 '20 at 17:19
If your AJAX code is "not working", please show us the code (and also the PHP code where you're sending the data), and explain more specifically what issue you are seeing. Then we can actually help you with it instead of just making suggestions. — ADyson, Jan 22 '20 at 17:29

score 0 · Answer 1 · answered Jan 22 '20 at 17:20

Just quick code, not tested it so your post data should be like this:
    var table = document.getElementById('table'),
    rows = table.getElementsByTagName('tr'),
    i, j, cells, OS_d,roleApp_d,Men_d,vcpu_d,Val_d,Per_d,hw_d ;

    var p_row = '[';
    for (i = 1, j = rows.length; i < j; ++i) {
       cells = rows[i].getElementsByTagName('td');
       if (!cells.length) {
          continue;
       }

        p_row += "{";
        p_row +='"OS_d":"'+cells[1].firstChild.value+'",';
        p_row +='"roleApp_d":"'+ cells[2].firstChild.value+'",';
        p_row +='"vcpu_d":"'+ cells[3].firstChild.value+'",';
        p_row +='"Men_d":"'+ cells[4].firstChild.value+'",';
        p_row +='"Val_d":"'+ cells[5].firstChild.value+'",';
        p_row +='"Per_d":"'+ cells[6].firstChild.value+'",';
        p_row +='"hw_d":"'+ cells[7].firstChild.value+'"';
        p_row += '},';

    }
    p_row = (p_row).replace(new RegExp("[,]+$"), "");
    p_row += ']';

   var formData = new FormData();
   formData.append('data',p_row);
   fetch("/save.php", {
            method: "POST",
            body: formData
        }).then(function (response) {
            console.log(response);

        }).catch(function (error) {
            console.error(error, "code: " + error.status);
   });

score 0 · Answer 2 · answered Jan 24 '20 at 06:24

I figured it out so I decided to share to the community. Thanks for the support.

   $.ajax({
    type: "POST",
    url: 'test.php',
    data: {p_row  : p_row },
    success: function(data){
        alert(data);
    }
    });
    }

    On the test.php side

    <?php

    $data = false;
    if(isset($_POST['p_row'])){
        $data  = $_POST['p_row'];
    }

    echo 'Received Data: ' . $data ;
    //$conn->close();
    ?>

How to POST js Table cell values to PHP and INSERT to MYSQL database

2 Answers2