Javascript, php & mysql - dynamic table form

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Been struggling with this since about 10pm (2am now), and I'm sick of googling and error messages - time to ask the pros.

What I'm trying to do:

If entry exists in mysql database, fill table with data
otherwise, start with a blank table and add rows dynamically with text boxes.
when user submits form, should perform validation on data (needs to be a valid code from a list)
then it should send to mysql database (if it already exists it should edit/remove as required)

What I've got so far:

Javascript:
Code: [ Select ]
var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation

function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
    // if it is first adding in this table setting initial rows count
    initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Unit code:';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';

try {
    var newRow = tbl.insertRow(rows_count);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = text;
    var newCell = newRow.insertCell(1);
    newCell.innerHTML = input;
    var newCell = newRow.insertCell(2);
    newCell.innerHTML = remove;
} catch (ex) {
    //if exception occurs
    alert(ex);
}
}

function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
    table.deleteRow(row.rowIndex);
} catch (ex) {
    alert(ex);
}
}
  1. var initial_count = new Array();
  2. var rows_limit = 0; // Set to 0 to disable limitation
  3. function addRow(table_id)
  4. {
  5. var tbl = document.getElementById(table_id);
  6. // counting rows in table
  7. var rows_count = tbl.rows.length;
  8. if (initial_count[table_id] == undefined)
  9. {
  10.     // if it is first adding in this table setting initial rows count
  11.     initial_count[table_id] = rows_count;
  12. }
  13. // determining real count of added fields
  14. var tFielsNum = rows_count - initial_count[table_id];
  15. if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
  16. var text = 'Unit code:';
  17. var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
  18. var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
  19. try {
  20.     var newRow = tbl.insertRow(rows_count);
  21.     var newCell = newRow.insertCell(0);
  22.     newCell.innerHTML = text;
  23.     var newCell = newRow.insertCell(1);
  24.     newCell.innerHTML = input;
  25.     var newCell = newRow.insertCell(2);
  26.     newCell.innerHTML = remove;
  27. } catch (ex) {
  28.     //if exception occurs
  29.     alert(ex);
  30. }
  31. }
  32. function removeRow(tbl,row)
  33. {
  34. var table = document.getElementById(tbl);
  35. try {
  36.     table.deleteRow(row.rowIndex);
  37. } catch (ex) {
  38.     alert(ex);
  39. }
  40. }


index.php:
Code: [ Select ]
<form id="form1" name="form1" method="post" action="setunits.php">
<h3>Set up units:</h3>

<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
    <tr><th colspan="3"><h3>Units</h3></th></tr>
    <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow(\'mytable\')"></th></tr>
</table><br>
<input name="submitbutton" type="submit" value="Submit"/>
</form>
  1. <form id="form1" name="form1" method="post" action="setunits.php">
  2. <h3>Set up units:</h3>
  3. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  4.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  5.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow(\'mytable\')"></th></tr>
  6. </table><br>
  7. <input name="submitbutton" type="submit" value="Submit"/>
  8. </form>


setunits.php:
Code: [ Select ]
print_r ($_GET);


(no idea what this should be)

Having trouble with:
Populating the table from mysql (do I just make the table with php? not sure what to do with the javascript)
Validation - checking the data against a list in the database
Getting the array from the form (no idea here)

If I understand everything by the end of this I'll do a full tutorial on it.

In action:
http://uwadb.com/timetable/setup.php?id=units

Thanks in advance!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

and by index.php, I mean setup.php?id=units

The javascript seems to be naming the table entries "postvar[]". Should it?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

alex89 wrote:
The javascript seems to be naming the table entries "postvar[]". Should it?

Yes, it should do that


You are using method post... so you should be doing the following
Code: [ Select ]
print_r($_POST);

instead of
Code: [ Select ]
print_r($_GET);

The test that I put up on my localserver gives me the following
Code: [ Select ]
Array
(
    [postvar] => Array
        (
            [0] => asdf
            [1] => 543
            [2] => 543
            [3] => 876
            [4] => 6786
            [5] => 986
            [6] => 789
            [7] => 687
            [8] => 7986
            [9] => 978
            [10] => 687
            [11] => 9876
            [12] => 6
            [13] => 786
            [14] => 78
            [15] => gjh
            [16] => 78b 786
            [17] => 879
            [18] => 6b8
            [19] => 78b
            [20] => b687
            [21] => 76b
            [22] => ht78
            [23] => 6vb78
            [24] =>
            [25] => uyf5v67
            [26] => 5678
            [27] => 675v
            [28] => tf
            [29] => v76
            [30] => 7f
            [31] => v
        )
 
    [submitbutton] => Submit
)
  1. Array
  2. (
  3.     [postvar] => Array
  4.         (
  5.             [0] => asdf
  6.             [1] => 543
  7.             [2] => 543
  8.             [3] => 876
  9.             [4] => 6786
  10.             [5] => 986
  11.             [6] => 789
  12.             [7] => 687
  13.             [8] => 7986
  14.             [9] => 978
  15.             [10] => 687
  16.             [11] => 9876
  17.             [12] => 6
  18.             [13] => 786
  19.             [14] => 78
  20.             [15] => gjh
  21.             [16] => 78b 786
  22.             [17] => 879
  23.             [18] => 6b8
  24.             [19] => 78b
  25.             [20] => b687
  26.             [21] => 76b
  27.             [22] => ht78
  28.             [23] => 6vb78
  29.             [24] =>
  30.             [25] => uyf5v67
  31.             [26] => 5678
  32.             [27] => 675v
  33.             [28] => tf
  34.             [29] => v76
  35.             [30] => 7f
  36.             [31] => v
  37.         )
  38.  
  39.     [submitbutton] => Submit
  40. )
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Oh of course. Thanks Bogey, you're a lifesaver.

Any ideas about populating the table with existing data?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I do have some ideas...
Code: [ Select ]
<?php
$ino = array('123','1234','1234','1234','1234','1234','1234');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UWAdb Timetable Setup</title>

<script language="javascript">

var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation

function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
    // if it is first adding in this table setting initial rows count
    initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Unit code:';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';

try {
    var newRow = tbl.insertRow(rows_count);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = text;
    var newCell = newRow.insertCell(1);
    newCell.innerHTML = input;
    var newCell = newRow.insertCell(2);
    newCell.innerHTML = remove;
} catch (ex) {
    //if exception occurs
    alert(ex);
}
}

function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
    table.deleteRow(row.rowIndex);
} catch (ex) {
    alert(ex);
}
}
</script>

</head>
<body>
<div id="header"></div>
<div id="container">

<form id="form1" name="form1" method="post" action="setunits.php">
<h3>Set up units:</h3>
<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
    <tr><th colspan="3"><h3>Units</h3></th></tr>
    <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow('mytable')"></th></tr>
<?php
foreach($ino as $info) :
?>
    <tr><td>Unit code:</td>
    <td> <input type="text" name="postvar[]" style="width:100%;" value="<?=$info;?>"></td>
    <td><input type="button" value="Remove" onclick="removeRow('my_table',this.parentNode.parentNode)" style="width:100%;"/></td></tr>
<?php
endforeach;
?>
</table><br>
<input name="submitbutton" type="submit" value="Submit"/>
</form>
</div>

</body>

</html>
  1. <?php
  2. $ino = array('123','1234','1234','1234','1234','1234','1234');
  3. ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>UWAdb Timetable Setup</title>
  9. <script language="javascript">
  10. var initial_count = new Array();
  11. var rows_limit = 0; // Set to 0 to disable limitation
  12. function addRow(table_id)
  13. {
  14. var tbl = document.getElementById(table_id);
  15. // counting rows in table
  16. var rows_count = tbl.rows.length;
  17. if (initial_count[table_id] == undefined)
  18. {
  19.     // if it is first adding in this table setting initial rows count
  20.     initial_count[table_id] = rows_count;
  21. }
  22. // determining real count of added fields
  23. var tFielsNum = rows_count - initial_count[table_id];
  24. if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
  25. var text = 'Unit code:';
  26. var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
  27. var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
  28. try {
  29.     var newRow = tbl.insertRow(rows_count);
  30.     var newCell = newRow.insertCell(0);
  31.     newCell.innerHTML = text;
  32.     var newCell = newRow.insertCell(1);
  33.     newCell.innerHTML = input;
  34.     var newCell = newRow.insertCell(2);
  35.     newCell.innerHTML = remove;
  36. } catch (ex) {
  37.     //if exception occurs
  38.     alert(ex);
  39. }
  40. }
  41. function removeRow(tbl,row)
  42. {
  43. var table = document.getElementById(tbl);
  44. try {
  45.     table.deleteRow(row.rowIndex);
  46. } catch (ex) {
  47.     alert(ex);
  48. }
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <div id="header"></div>
  54. <div id="container">
  55. <form id="form1" name="form1" method="post" action="setunits.php">
  56. <h3>Set up units:</h3>
  57. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  58.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  59.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow('mytable')"></th></tr>
  60. <?php
  61. foreach($ino as $info) :
  62. ?>
  63.     <tr><td>Unit code:</td>
  64.     <td> <input type="text" name="postvar[]" style="width:100%;" value="<?=$info;?>"></td>
  65.     <td><input type="button" value="Remove" onclick="removeRow('my_table',this.parentNode.parentNode)" style="width:100%;"/></td></tr>
  66. <?php
  67. endforeach;
  68. ?>
  69. </table><br>
  70. <input name="submitbutton" type="submit" value="Submit"/>
  71. </form>
  72. </div>
  73. </body>
  74. </html>
The only thing, the delete button doesn't work there...
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Thanks Bogey. I did the following:

Code: [ Select ]
        foreach ($units as $key => $value)
        {
        echo "<tr>";
        echo "<td>Unit code:</td><td><input name=\"postvar[]\" type=\"text\" style=\"width: 100%;\" value=\"$value\"/></td><td><input type=\"button\" style=\"width: 100%;\" onclick=\"removeRow('mytable',this.parentNode.parentNode)\" value=\"Remove\"/></td>";
        
        echo "</tr>";
        } 
  1.         foreach ($units as $key => $value)
  2.         {
  3.         echo "<tr>";
  4.         echo "<td>Unit code:</td><td><input name=\"postvar[]\" type=\"text\" style=\"width: 100%;\" value=\"$value\"/></td><td><input type=\"button\" style=\"width: 100%;\" onclick=\"removeRow('mytable',this.parentNode.parentNode)\" value=\"Remove\"/></td>";
  5.         
  6.         echo "</tr>";
  7.         } 



Demo:
http://uwadb.com/timetable/setup.php?id=units
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Impressive! Glad you got it working :)
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

The problem with your code is the table was called "mytable" and the js to delete was "removeRow('my_table',this.parentNode.parentNode)"

:)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

alex89 wrote:
The problem with your code is the table was called "mytable" and the js to delete was "removeRow('my_table',this.parentNode.parentNode)"

:)
Oh, small mistakes make a world of difference :lol:

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 134 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.