-1

I have a form that the user can add additional lines (using javaScript) but when the save button is clicked, how to I grab the new data to assign to a variable?

What's happening now: The user adds new rows, clicks save and the rows disappear from the page along with the data.

Here is my html:

    <table id="desc_table" class="form">
      <tbody id="desc_tbody">
        <tr id="headings">
          <td><font><h3>Description</h3></font></td>
          <td><font><h3>Hours</h3></font></td>
          <td><font><h3>Rate</h3></font></td>
          <td><font><h3>Amount</h3></font></td>
          <td></td>                          
        </tr>

        <tr>
          <td><input name="desc1" type="text" value="<?php echo $desc1; ?>"></td> 
          <td> <input name="desc_hr1" type="text" value="<?php echo $desc_hr1; ?>"></td>
          <td> <input name="desc_rt1" type="text" value="<?php echo $desc_rt1; ?>"></td>
          <td><input name="desc_amt1" type="text" value="<?php echo $desc_amt1; ?>"></td>

          <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
        </tr>
        <tr>
          <td><input name="desc2" type="text" value="<?php echo $desc2; ?>"></td> 
          <td> <input name="desc_hr2" type="text" value="<?php echo $desc_hr2; ?>"></td>
          <td> <input name="desc_rt2" type="text" value="<?php echo $desc_rt2; ?>"></td>
          <td><input name="desc_amt2" type="text" value="<?php echo $desc_amt2; ?>"></td>
          <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
        </tr>
        <tr>
          <td><input name="desc3" type="text" value="<?php echo $desc3; ?>"></td>
          <td> <input name="desc_hr3" type="text" value="<?php echo $desc_hr3; ?>"></td>
          <td> <input name="desc_rt3" type="text" value="<?php echo $desc_rt3; ?>"></td>
          <td><input name="desc_amt3" type="text" value="<?php echo $desc_amt3; ?>"></td>
          <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
        </tr>                         
        </tbody>
   </table>

    <div>
        <center><input type="button" value="Add New Line" id="add_btn" name="add_btn" onclick="newLine()"></center>
    </div>  

JavaScript:

function newLine(){

//get the total amount of rows in the table
var $rowcount = $('#desc_table tr').length;

//add the row number to the field name to make it unique
var $desc = "desc" + $rowcount;
var $desc_hr = "desc_hr" + $rowcount;
var $desc_rt = "desc_rt" + $rowcount;
var $desc_amt = "desc_amt" + $rowcount;

//create new row data
var $newRowData = '<tr><td><input name=' + $desc + ' type=text></td><td><input name=' + $desc_hr + ' type=text></td><td><input name=' + $desc_rt + ' type=text></td><td><input name=' +$desc_amt+ ' type=text></td><td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td></tr>';

//append new row to bottom of the table
$($newRowData).appendTo($("#desc_table tbody"));

}

PHP variable declaration:

...

if (!empty($_POST['desc1'])){
    $desc1 = $_POST['desc1'];
}
else{
    $desc1 = NULL;
}
if (!empty($_POST['desc_hr1'])){
    $desc_hr1 = $_POST['desc_hr1'];
}
else{
    $desc_hr1 = NULL;
}
if (!empty($_POST['desc_rt1'])){
    $desc_rt1 = $_POST['desc_rt1'];
}
else{
    $desc_rt1 = NULL;
}
if (!empty($_POST['desc_amt1'])){
    $desc_amt1 = $_POST['desc_amt1'];
}
else{
    $desc_amt1 = NULL;
}
if (!empty($_POST['desc2'])){
    $desc2 = $_POST['desc2'];
}
else{
    $desc2 = NULL;
}
if (!empty($_POST['desc_hr2'])){
    $desc_hr2 = $_POST['desc_hr2'];
}

...

When the page variables are captured with the POST, how do I find the new row variables to declare them and capture the data?

jd0117
  • 105
  • 9
  • I don't see any php. What's a php post? where's your save handler? – malifa Nov 06 '17 at 19:51
  • Just added the variable declaration. Is this what you are looking for? Below that I will be adding the data to a mySQL database. one solution I was thinking of was to put the rowcount of that table into a global variable. Would this make sense? If so, how would I do this? in the JavaScript or in the php? I could then do a loop to gather the variables. – jd0117 Nov 06 '17 at 19:57
  • 1
    https://stackoverflow.com/questions/4688880/html-element-array-name-something-or-name-something – FunkyMonk91 Nov 06 '17 at 19:58
  • 2
    maybe somehow use a dynamic array? – Jephren Naicker Nov 06 '17 at 19:59
  • okay - thanks I will look into JSON...might be my best option. – jd0117 Nov 06 '17 at 20:06

2 Answers2

2

Use array-style names rather than incrementing the suffix on each row:

   <tr>
      <td><input name="desc[]" type="text" value="<?php echo $desc; ?>"></td> 
      <td> <input name="desc_hr[]" type="text" value="<?php echo $desc_hr; ?>"></td>
      <td> <input name="desc_rt[]" type="text" value="<?php echo $desc_rt; ?>"></td>
      <td><input name="desc_amt[]" type="text" value="<?php echo $desc_amt; ?>"></td>

      <td><input type="button" value="X" name="delete" class="btnDelete" onclick="deleteLine(this)"></td>
    </tr>

PHP will then put all the inputs into arrays, and you can loop through them.

foreach ($_POST['desc'] AS $i => $desc) {
    $desc_hr = $_POST['desc_hr'][$i];
    $desc_rt = $_POST['desc_rt'][$i];
    $desc_amt = $_POST['desc_amt'][$i];
    ...
}
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thank you! I'm trying your solution..please forgive me - I am still learning so I'm pretty rusty. But when you echo our $desc, $desc_hr, etc...do you have to put the [0], [1] behind to pick the array item? I am getting "undefined variable $desc", etc errors on each field. – jd0117 Nov 06 '17 at 20:42
  • The variables are set inside the loop. – Barmar Nov 06 '17 at 20:51
  • there is a typo in second line, it should be `$desc_hr` not `$desc)_hr`. The error message did give you a hint, because it does not know `$desc`, because actually there is no variable `$desc`, it just stops at the `)` because of the typo – Asara Nov 06 '17 at 20:51
  • I have been trying to get this to work. I know it's my logic that is failing. hopefully it's something simple.I will have to put my issue in another question. – jd0117 Nov 07 '17 at 18:15
0

Put in a hidden input and then set its value to the amount of rows shown by default. When you add or delete a row update the value using JavaScript. When submitted you can then use this value in a loop.

However, the easiest and most appropriate solution would be just to use form arrays. For example, why not call each input name as "desc[]"? Then use the array index to figure out where/amount of rows etc. You could have 1 or 1000 inputs named that...

Andrew
  • 39
  • 8