Adding rows to html table and updating all to mysql

  • CaptainFourpack
  • Born
  • Born
  • CaptainFourpack
  • Posts: 2

Post 3+ Months Ago

Hi guys and gals

I am new to the forum, and to both js and php. I have found a lot of help through browsing this forum (Hi to everyone, and thanks!).

Im have borrowed and adapted some code i found here:
http://www.ozzu.com/programming-forum/add-rows-html-and-send-mysql-t106931.html but am having a couple of issues and wondered if you might help.

I am trying to make an html table containing the data taken from my DB table called voting. From this i want the user to be able to edit the table, as well as add new rows. When they hit update, i want all the entries to be updated in the DB (new rows added, deleted rows deleted, and any changes updated).

My main page, including the javascript and html form is coded as follows:
Code: [ Select ]
<html>
    <head>
        <script type="text/javascript">
            function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var colCount = table.rows[0].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    switch(newcell.childNodes[0].type) {
                        case "text":
                            newcell.childNodes[0].value = "0";
                            break;
                        case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    }
                }
            }
            function deleteRow(tableID) {
                try {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
                    for(var i=0; i<rowCount; i++) {
                        var row = table.rows[i];
                        var chkbox = row.cells[0].childNodes[0];
                        if(null != chkbox && true == chkbox.checked) {
                            if(rowCount <= 1) {
                                alert("Cant delete all rows, simply update the text and count on last remaining row");
                                break;
                            }
                            table.deleteRow(i);
                            rowCount--;
                            i--;
                        }
                    }
                }catch(e) { alert(e); }
            }
        </script>
    </head>
    <body>
        <div id="header">
            <h1 style="margin-bottom:0;">Admin Page</h1>
            <br />
        </div>
        
        <?php
            $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
            if (!$con){ die('Could not connect: ' . mysql_error()); }
            else
            {
                mysql_select_db("dbnameremoved", $con);
                $result = mysql_query("SELECT * FROM voting");
            }
            echo "<style type='text/css'>";
            echo "table,tr,td{border:0px solid black;}";
            echo "</style>";
            echo "<table id='titlebar' cellspacing='0px'>";
                echo "<tr>";
                    echo "<td style='width:20px;'>&#10003;</td>";
                    echo "<td style='width:200px;'>Text</td>";
                    echo "<td style='width:25px;'>Count</td>";
                echo "</tr>";
            echo "</table>";
            echo "<form action='send.php' method='POST'>";
                echo "<table id='dataTable' width='auto' style='margin:-4px 0 0 0;' cellspacing='0px'>";
            while($row = mysql_fetch_array($result))
            {
                echo "<tr>";
                echo "<td style='width:20px;'><INPUT type='checkbox' name='chk' /></td>";
                echo "<td><INPUT type='text' name='voteText[" . $row['id'] . "]' style='width:200px;' value='" . $row['text'] . "' autocomplete='on' placeholder='Show' required/></td>";
                echo "<td><INPUT type='text' name='voteCount[" . $row['id'] . "]' style='width:25px;' value='" . $row['count'] . "' autocomplete='on' placeholder='Show' required/></td>";
                echo "</tr>";
            }
        ?>
        </table>
        <INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
        <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
        <INPUT type="submit" value="Update"/>
        </form>
    </body
</html>
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function addRow(tableID) {
  5.                 var table = document.getElementById(tableID);
  6.                 var rowCount = table.rows.length;
  7.                 var row = table.insertRow(rowCount);
  8.                 var colCount = table.rows[0].cells.length;
  9.                 for(var i=0; i<colCount; i++) {
  10.                     var newcell = row.insertCell(i);
  11.                     newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  12.                     switch(newcell.childNodes[0].type) {
  13.                         case "text":
  14.                             newcell.childNodes[0].value = "0";
  15.                             break;
  16.                         case "checkbox":
  17.                             newcell.childNodes[0].checked = false;
  18.                             break;
  19.                     }
  20.                 }
  21.             }
  22.             function deleteRow(tableID) {
  23.                 try {
  24.                     var table = document.getElementById(tableID);
  25.                     var rowCount = table.rows.length;
  26.                     for(var i=0; i<rowCount; i++) {
  27.                         var row = table.rows[i];
  28.                         var chkbox = row.cells[0].childNodes[0];
  29.                         if(null != chkbox && true == chkbox.checked) {
  30.                             if(rowCount <= 1) {
  31.                                 alert("Cant delete all rows, simply update the text and count on last remaining row");
  32.                                 break;
  33.                             }
  34.                             table.deleteRow(i);
  35.                             rowCount--;
  36.                             i--;
  37.                         }
  38.                     }
  39.                 }catch(e) { alert(e); }
  40.             }
  41.         </script>
  42.     </head>
  43.     <body>
  44.         <div id="header">
  45.             <h1 style="margin-bottom:0;">Admin Page</h1>
  46.             <br />
  47.         </div>
  48.         
  49.         <?php
  50.             $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
  51.             if (!$con){ die('Could not connect: ' . mysql_error()); }
  52.             else
  53.             {
  54.                 mysql_select_db("dbnameremoved", $con);
  55.                 $result = mysql_query("SELECT * FROM voting");
  56.             }
  57.             echo "<style type='text/css'>";
  58.             echo "table,tr,td{border:0px solid black;}";
  59.             echo "</style>";
  60.             echo "<table id='titlebar' cellspacing='0px'>";
  61.                 echo "<tr>";
  62.                     echo "<td style='width:20px;'>&#10003;</td>";
  63.                     echo "<td style='width:200px;'>Text</td>";
  64.                     echo "<td style='width:25px;'>Count</td>";
  65.                 echo "</tr>";
  66.             echo "</table>";
  67.             echo "<form action='send.php' method='POST'>";
  68.                 echo "<table id='dataTable' width='auto' style='margin:-4px 0 0 0;' cellspacing='0px'>";
  69.             while($row = mysql_fetch_array($result))
  70.             {
  71.                 echo "<tr>";
  72.                 echo "<td style='width:20px;'><INPUT type='checkbox' name='chk' /></td>";
  73.                 echo "<td><INPUT type='text' name='voteText[" . $row['id'] . "]' style='width:200px;' value='" . $row['text'] . "' autocomplete='on' placeholder='Show' required/></td>";
  74.                 echo "<td><INPUT type='text' name='voteCount[" . $row['id'] . "]' style='width:25px;' value='" . $row['count'] . "' autocomplete='on' placeholder='Show' required/></td>";
  75.                 echo "</tr>";
  76.             }
  77.         ?>
  78.         </table>
  79.         <INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
  80.         <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
  81.         <INPUT type="submit" value="Update"/>
  82.         </form>
  83.     </body
  84. </html>


...and my send.php page is currently just trying to iterate through the results (i have commented out my attempt at what i want it to do eventually, sans the loop it will obviously need there)

send.php
Code: [ Select ]
<?php
    
    print_r($_POST);
    echo "<br /><br />";
    
    foreach($_POST['voteText'] as $key => $value) {
        echo "voteText[$key]=$value<br>";
    }
    echo "<br /><br />";
    foreach($_POST['voteCount'] as $key => $value) {
        echo "voteText[$key]=$value<br>";
    }
    
    /*
    $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
    if (!$con) { die('Could not connect: ' . mysql_error()); }
    else
    {
        mysql_select_db("totemvote", $con);
        
        $textV = mysql_real_escape_string(stripslashes($_POST['voteText']));
        $countV = mysql_real_escape_string(stripslashes($_POST['voteCount']));
        
        $sql="DELETE * from voting";
        if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
        
        $sql="INSERT INTO voting (text, count) VALUES ('$textV','$countV')";
        if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
        echo "Database updated";
        mysql_close($con);
    }
    */
?>
  1. <?php
  2.     
  3.     print_r($_POST);
  4.     echo "<br /><br />";
  5.     
  6.     foreach($_POST['voteText'] as $key => $value) {
  7.         echo "voteText[$key]=$value<br>";
  8.     }
  9.     echo "<br /><br />";
  10.     foreach($_POST['voteCount'] as $key => $value) {
  11.         echo "voteText[$key]=$value<br>";
  12.     }
  13.     
  14.     /*
  15.     $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
  16.     if (!$con) { die('Could not connect: ' . mysql_error()); }
  17.     else
  18.     {
  19.         mysql_select_db("totemvote", $con);
  20.         
  21.         $textV = mysql_real_escape_string(stripslashes($_POST['voteText']));
  22.         $countV = mysql_real_escape_string(stripslashes($_POST['voteCount']));
  23.         
  24.         $sql="DELETE * from voting";
  25.         if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
  26.         
  27.         $sql="INSERT INTO voting (text, count) VALUES ('$textV','$countV')";
  28.         if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
  29.         echo "Database updated";
  30.         mysql_close($con);
  31.     }
  32.     */
  33. ?>


I have two issues, one more serious than the other.

Firstly, in the JS, i would like to add default values to the new rows such that the "text" field is empty, while the "count" field contains a zero. In the original post i borrowed this from, the JS swithc statement has several cases for newcell.childNodes[0].type = "text". I dont understand why, as surely it breaks after finding the first case to be true! I have tried adding if statements in there based on th counter to fill the value with what i want, with unpredictable results. Please advise if u can.

Secondly, in my send.php, I have problems receiving all the data rows. In my tests i have two rows in the DB, which get displayed fine. If i add two more rows (for example), the loops gong through my arrays in send.php only contain two values, one of the two original datasets i had in DB, and the last of the added rows.

Im guessing that this is something to do with my JS creating child nodes, but i am at a loss. Again, andy advice is greatly appreciated.

I hope i have presented this well, and thanks in anticipation for any help you can offer.
  • CaptainFourpack
  • Born
  • Born
  • CaptainFourpack
  • Posts: 2

Post 3+ Months Ago

Can nobody offer any advice?

Thanks in anticipation..

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.