Reputation: 815

From HTML Table to mysql database

I have a table with information. I can add/delete the rows of a HTML table with Javascript. How should I do to put the information from the table in a sql database? I have been searching if it is possible to insert the data from the table using the javascript function addRow(tableID), but I don't think I can do that. Please give me suggestions on how I should solve the problem.

Here is my code:

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        cell3.innerHTML = rowCount;

        var cell4 = row.insertCell(3);
        cell4.innerHTML = rowCount;

        var cell5 = row.insertCell(4);
        cell5.innerHTML = rowCount;

        var cell6 = row.insertCell(5);
        cell6.innerHTML = rowCount;
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        // Unchecking the header checkbox.
        var row = table.rows[0];
        var chkbox = row.cells[0].childNodes[0];
        chkbox.checked = false;

        }catch(e) {
            alert(e);
        }
    }

    function checkAll(source) {
        var checkboxes = new Array();
        checkboxes = document.getElementsByTagName('input');

        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = source.checked;
        }
    }

</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" border="1">
<tr>
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]"/></th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</TABLE>

Upvotes: 0

Answers (2)

Donovan Charpin

Reputation: 3397

You can use this function

function loadXMLDoc(cell1,cell2,cell3 ...) { // Your parametters
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    //                                   Answer of ProcessingPage.php ^
        }
    }

    xmlhttp.open("GET", "ProcessingPage.php?cell1="+cell1+"&cell2..." , true);
    //              ^POST OR GET method         Add other param  ^
    xmlhttp.send();
}

ProcessingPage.php

<?php
    $cell1 = $_GET['cell1'];
    $cell1 = $_GET['cell2'];
    //...
?>

Upvotes: 1

Nunners

Reputation: 3047

Here would be how to use jQuery Ajax to make a call to the server :

Your addRow function would become :

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount;

    var cell3 = row.insertCell(2);
    cell3.innerHTML = rowCount;

    var cell4 = row.insertCell(3);
    cell4.innerHTML = rowCount;

    var cell5 = row.insertCell(4);
    cell5.innerHTML = rowCount;

    var cell6 = row.insertCell(5);
    cell6.innerHTML = rowCount;

    //This passes the first 3 rows values to the insert.php page, in which you will need to retrieve the values and insert them to the Database using PHP
    $.post('insert.php', {
        cell1:rowCount, 
        cell2:rowCount, 
        cell3:rowCount
    });

}

As mentioned in the comment, the code will post the first 3 rows information to the insert.php which will need to handle the information passed and insert the record into a database using PHP script.

Upvotes: 1

From HTML Table to mysql database

Answers (2)

Related Questions