Back To Programming / Scripting / Coding Forum

Javascript/php dynamic table to mysql

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

Post July 18th, 2008, 3:08 am

I'm looking to make a table add/remove rows on button click (javascript) and then submit the data input into a mysql database (php).

The table so far

Code: [ Select ]
 
<html>
<head>
<title>Nomad JMDB - Create</title>
<script type="text/javascript">
 
function AddRow ()
{
 var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
 var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
 var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
   
 var o_button = document.createElement ("input");
 o_button.type = "button";
 o_button.value = "Remove";
 o_button.onclick = RemoveRow;
 
 var o_td0 = document.createElement ("td");
 var o_td1 = document.createElement ("td");
 var o_td2 = document.createElement ("td");
 var o_td3 = document.createElement ("td");
 
 var o_tr = document.createElement ("tr");
 var o_body = document.getElementById ("dynamic_table_body");
 
 o_td0.appendChild (o_txt0);
 o_td1.appendChild (o_txt1);
 o_td2.appendChild (o_txt2);
 o_td3.appendChild (o_button);
 
 o_tr.appendChild (o_td0);
 o_tr.appendChild (o_td1);
 o_tr.appendChild (o_td2);
 o_tr.appendChild (o_td3);
 
// document.form1.01Bno.value = document.form1.01Bno.value + 1;
 
 o_body.appendChild (o_tr);
}
function RemoveRow ()
{
 var dinosaur = this.parentNode.parentNode;
 dinosaur.parentNode.removeChild (dinosaur);  // :-)
}
</script>
</head>
<body style="font-family: Arial">
<form id="form1" name="form1" method="post" action="create2.php">
  </p>
  <br>
  <table border="1" cellpadding="0" cellspacing="0">
    <tbody id="dynamic_table_body"><tr>
      <td width="92" height="102">Building #</td>
      <td width="63">Type</td>
      <td width="81">Class</td>
      <td width="221">
        <table width="200" cellpadding="0">
          <tr>
            <td>#: </td>
            <td><input name="01Bno" type="text" id="01Bno" value="001" size="10"></td>
          </tr>
          <tr>
            <td>Type: </td>
            <td><select name="01Type" id="01Type">
              <option value="Type 1" selected>Type 1</option>
              <option value="Type 2">Type 2</option>
                        </select></td>
          </tr>
          <tr>
            <td>Class:</td>
            <td><select name="01Class" id="01Class">
              <option value="1" selected>1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select></td>
          </tr>
          <tr>
            <td colspan="2"><button type="button" onClick="AddRow ();">Add Building</button></td>
            </tr>
        </table>
        </td>
    </tr>
   </tbody>
  </table>
  <p>
    <label>
    <input type="reset" name="clear" id="clear" value="Clear" />
    <input type="submit" name="create" id="create" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <title>Nomad JMDB - Create</title>
  5. <script type="text/javascript">
  6.  
  7. function AddRow ()
  8. {
  9.  var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
  10.  var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
  11.  var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
  12.    
  13.  var o_button = document.createElement ("input");
  14.  o_button.type = "button";
  15.  o_button.value = "Remove";
  16.  o_button.onclick = RemoveRow;
  17.  
  18.  var o_td0 = document.createElement ("td");
  19.  var o_td1 = document.createElement ("td");
  20.  var o_td2 = document.createElement ("td");
  21.  var o_td3 = document.createElement ("td");
  22.  
  23.  var o_tr = document.createElement ("tr");
  24.  var o_body = document.getElementById ("dynamic_table_body");
  25.  
  26.  o_td0.appendChild (o_txt0);
  27.  o_td1.appendChild (o_txt1);
  28.  o_td2.appendChild (o_txt2);
  29.  o_td3.appendChild (o_button);
  30.  
  31.  o_tr.appendChild (o_td0);
  32.  o_tr.appendChild (o_td1);
  33.  o_tr.appendChild (o_td2);
  34.  o_tr.appendChild (o_td3);
  35.  
  36. // document.form1.01Bno.value = document.form1.01Bno.value + 1;
  37.  
  38.  o_body.appendChild (o_tr);
  39. }
  40. function RemoveRow ()
  41. {
  42.  var dinosaur = this.parentNode.parentNode;
  43.  dinosaur.parentNode.removeChild (dinosaur);  // :-)
  44. }
  45. </script>
  46. </head>
  47. <body style="font-family: Arial">
  48. <form id="form1" name="form1" method="post" action="create2.php">
  49.   </p>
  50.   <br>
  51.   <table border="1" cellpadding="0" cellspacing="0">
  52.     <tbody id="dynamic_table_body"><tr>
  53.       <td width="92" height="102">Building #</td>
  54.       <td width="63">Type</td>
  55.       <td width="81">Class</td>
  56.       <td width="221">
  57.         <table width="200" cellpadding="0">
  58.           <tr>
  59.             <td>#: </td>
  60.             <td><input name="01Bno" type="text" id="01Bno" value="001" size="10"></td>
  61.           </tr>
  62.           <tr>
  63.             <td>Type: </td>
  64.             <td><select name="01Type" id="01Type">
  65.               <option value="Type 1" selected>Type 1</option>
  66.               <option value="Type 2">Type 2</option>
  67.                         </select></td>
  68.           </tr>
  69.           <tr>
  70.             <td>Class:</td>
  71.             <td><select name="01Class" id="01Class">
  72.               <option value="1" selected>1</option>
  73.               <option value="2">2</option>
  74.               <option value="3">3</option>
  75.               <option value="4">4</option>
  76.               <option value="5">5</option>
  77.               <option value="6">6</option>
  78.               <option value="7">7</option>
  79.               <option value="8">8</option>
  80.               <option value="9">9</option>
  81.               <option value="10">10</option>
  82.             </select></td>
  83.           </tr>
  84.           <tr>
  85.             <td colspan="2"><button type="button" onClick="AddRow ();">Add Building</button></td>
  86.             </tr>
  87.         </table>
  88.         </td>
  89.     </tr>
  90.    </tbody>
  91.   </table>
  92.   <p>
  93.     <label>
  94.     <input type="reset" name="clear" id="clear" value="Clear" />
  95.     <input type="submit" name="create" id="create" value="Submit" />
  96.     </label>
  97.   </p>
  98. </form>
  99. </body>
  100. </html>
  101.  


I don't know how to then use the data in the table when submitting the form. I would prefer a dynamic table, hence not php created (and no page refresh required). Any ideas?

I'm also stuck on incrementing the "01Bno" textbox by one for each new row, (If possible, it should be padded - eg 001, 002, ...)

Something like the following?
Code: [ Select ]
document.form1.01Bno.value = document.form1.01Bno.value + 1;


Thanks in advance for any help :)
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 18th, 2008, 3:08 am

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

Post July 19th, 2008, 1:32 am

:( bump!

Anyone have any ideas? I would really appreciate any help - I know it's alot of code to look through.

The table works fine, but I don't know how to refer (or if I can) to the data inside it when submitting the form.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post July 19th, 2008, 1:54 am

Replace

Code: [ Select ]
var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
  1. var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
  2. var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
  3. var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);


with

Code: [ Select ]
var o_txt0 = document.getElementById ("01Bno").cloneNode(true);
var o_txt1 = document.getElementById ("01Type").cloneNode(true);
var o_txt2 = document.getElementById ("01Class").cloneNode(true);
 
 o_txt0.name = 'o_text0[]';
 o_txt1.name = 'o_text1[]';
 o_txt2.name = 'o_text2[]';
  1. var o_txt0 = document.getElementById ("01Bno").cloneNode(true);
  2. var o_txt1 = document.getElementById ("01Type").cloneNode(true);
  3. var o_txt2 = document.getElementById ("01Class").cloneNode(true);
  4.  
  5.  o_txt0.name = 'o_text0[]';
  6.  o_txt1.name = 'o_text1[]';
  7.  o_txt2.name = 'o_text2[]';


That will make available 3 arrays. "o_text0", "o_text1", & "o_text2" to the form processor and keep the rows editable for the user.
Strong with this one, the sudo is.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 19th, 2008, 9:03 pm

Thanks for the reply.

I've had a play - works nicely :)

How would I remove an entry from the array - what changes would be required to the RemoveRow function?

Also, does anyone know how to automate the numbering in the first row of the table?
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 19th, 2008, 11:39 pm

Code: [ Select ]
function Increment() {
document.form1.bBno.value = document.form1.bBno.value + 1;
}
  1. function Increment() {
  2. document.form1.bBno.value = document.form1.bBno.value + 1;
  3. }


Works once then stops.

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

Post August 25th, 2008, 11:41 pm

/bump

I'm still looking for a way to make the first column of the table automatically numbered (but still in text boxes), can anyone help?

See here for existing.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Joined: Jul 18, 2008
  • Posts: 239
  • Loc: Western Australia
  • Status: Offline

Post July 9th, 2009, 12:14 pm

This is one of my ongoing struggles - see programming-forum/javascript-php-mysql-dynamic-table-form-t98858.html

Page 1 of 1

Post Information

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

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