Back To Programming / Scripting / Coding Forum

Javascript, php & mysql - dynamic table form

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 9th, 2009, 11:35 am

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


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>
  4. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  5.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  6.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow(\'mytable\')"></th></tr>
  7. </table><br>
  8. <input name="submitbutton" type="submit" value="Submit"/>
  9. </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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 9th, 2009, 11:35 am

  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 9th, 2009, 12:08 pm

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

The javascript seems to be naming the table entries "postvar[]". Should it?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 1:16 pm

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. )
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 9th, 2009, 10:50 pm

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

Any ideas about populating the table with existing data?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 11:18 pm

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>
  10. <script language="javascript">
  12. var initial_count = new Array();
  13. var rows_limit = 0; // Set to 0 to disable limitation
  15. function addRow(table_id)
  16. {
  17. var tbl = document.getElementById(table_id);
  18. // counting rows in table
  19. var rows_count = tbl.rows.length;
  20. if (initial_count[table_id] == undefined)
  21. {
  22.     // if it is first adding in this table setting initial rows count
  23.     initial_count[table_id] = rows_count;
  24. }
  25. // determining real count of added fields
  26. var tFielsNum = rows_count - initial_count[table_id];
  27. if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
  28. var text = 'Unit code:';
  29. var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
  30. var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
  32. try {
  33.     var newRow = tbl.insertRow(rows_count);
  34.     var newCell = newRow.insertCell(0);
  35.     newCell.innerHTML = text;
  36.     var newCell = newRow.insertCell(1);
  37.     newCell.innerHTML = input;
  38.     var newCell = newRow.insertCell(2);
  39.     newCell.innerHTML = remove;
  40. } catch (ex) {
  41.     //if exception occurs
  42.     alert(ex);
  43. }
  44. }
  46. function removeRow(tbl,row)
  47. {
  48. var table = document.getElementById(tbl);
  49. try {
  50.     table.deleteRow(row.rowIndex);
  51. } catch (ex) {
  52.     alert(ex);
  53. }
  54. }
  55. </script>
  57. </head>
  58. <body>
  59. <div id="header"></div>
  60. <div id="container">
  62. <form id="form1" name="form1" method="post" action="setunits.php">
  63. <h3>Set up units:</h3>
  64. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  65.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  66.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow('mytable')"></th></tr>
  67. <?php
  68. foreach($ino as $info) :
  69. ?>
  70.     <tr><td>Unit code:</td>
  71.     <td> <input type="text" name="postvar[]" style="width:100%;" value="<?=$info;?>"></td>
  72.     <td><input type="button" value="Remove" onclick="removeRow('my_table',this.parentNode.parentNode)" style="width:100%;"/></td></tr>
  73. <?php
  74. endforeach;
  75. ?>
  76. </table><br>
  77. <input name="submitbutton" type="submit" value="Submit"/>
  78. </form>
  79. </div>
  81. </body>
  83. </html>
The only thing, the delete button doesn't work there...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 10th, 2009, 8:32 am

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
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 10th, 2009, 3:14 pm

Impressive! Glad you got it working :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 11th, 2009, 4:34 am

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

:)
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 11th, 2009, 11:06 am

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:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: Zealous and 170 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.