单击提交按钮时，将在javascript中创建的动态生成的html表保存并传递给php

Question

I have to submit a dynamically generated html table that is created using javascript and pass this table to a php mail function when submit button is clicked ,I would like to know whether its possible to preserve the dynamically generated table in javascript when the form has any errors also when submit button is clicked and the dynamically generated table is lost . I am a beginner and i have fared till making a dynamically generated javascript table with delete , now i need to pass this table to a php submit button and then can only proceed further

Any help will be grateful since time is short for me right now pls help.

the code is as follows

To add rows to a table

function addRow(){

var a =document.getElementById("sociallink").value;
    var b =document.getElementById("socialemail").value;
    var c =document.getElementById("socialpass").value;


var media=document.getElementById('media');

if ( media.selectedIndex  ==  "1" )
{
    media_type = "facebook";
}

var table = document.getElementById("dataTable");


var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(1).innerHTML= media_type;
row.insertCell(2).innerHTML= a;
row.insertCell(3).innerHTML=b;
row.insertCell(3).innerHTML=c;

table.style.display ="block";

}

php echoing html is as follows

    $form ="<form action='./form3.php'  method='post'  name='seoform'> 
        <tbody id='dataTable' border='1' cellpadding='2'>  
                      <tr>
                  <td> Remove Media </td> 
                      <td> Media </td>
                                <td>Media Link</td>
                                <td> Media Email</td>
                                <td> Media Password </td>

                      </tr>
<tr> 
<td> </td> 
<td  > <input type='submit' name='seoformbtn' value='Register'  />   </td> 
</tr> 


        </tbody> </form> ";

    echo $form;

Answer 1

You can store the markup for the table created in an hidden input which is then sent along when the form is submitted.

Add a hidden textarea to your form

<textarea id="table-markup"></textarea>

CSS:

#table-markup{
   display: none;
}

give your table an id like so:

<table id='table'><tbody id='dataTable'>.....</tbody></table>

var tableMarkup = document.getElementById("table");
document.getElementById("table-markup").value = tableMarkup.innerHTML;

Now when the form is submitted this will be sent along with it.. I recommend using the POST method to send your form data (depending upon your table markup)

Answer 2

To store the table is simple lets say your table is

<table id='tableid' >......</table>

var tbl = $('#tableid').html();
// to complement previous answer, then you put in hidden field
$("#table-markup").val(tbl);