Javascript/php dynamic table to mysql

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

Post 3+ Months Ago

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
  • 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

:( 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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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.
  • alex89
  • Bronze Member
  • Bronze Member
  • User avatar
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

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
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

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
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

/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
  • Posts: 239
  • Loc: Western Australia

Post 3+ Months Ago

Post Information

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