提交表单后，如何使用JQuery从附加到HTML表的字段中获取$ _POST数组中的值？

Question

I've one HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with tablw containing only two records:

<form action="rebates.php" role="form" method="post">
  <div style="margin-left: 12px" class="col-xs-4">
    <div class="form-group">
      <label for="company_name" class="col-lg-4">Manufacturer </label>
      <div class="col-lg-7">
        <select id="company_name" name="company_name" class="form-control">
          <option value=""  selected='selected'>Select Manufacturer</option>
          <option value="33" >Eywa Solutions</option>
          <option value="37" >Amazon</option>
          <option value="40" >Test</option>
          <option value="42" >RK</option>
          <option value="46" >Santa Margherita</option>
        </select>
      </div>
    </div>
  </div>
    <div style="margin-left: -61px" class="col-xs-4">
      <div class="form-group">
        <label for="product_id" class="col-lg-3">Product </label>
        <div class="col-lg-7">
          <select id="product_id" name="product_id" class="form-control">
            <option value=""  selected='selected'>Select Product</option>
            <option value="5" >Chesse</option>
            <option value="8" >Laptop an</option>
            <option value="9" >Prosecco</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <br/> 
  <div class="col-lg-2"></div>            
  <div class="col-md-8">   
    <div style="overflow:auto" class="well">      
      <button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
      <br/>
      <div class="table-responsive">
        <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
          <thead>
            <tr  id="Row1">
              <th style="vertical-align:middle" >Pack Of</th>
              <th style="vertical-align:middle">Quantity</th>
              <th style="vertical-align:middle">Volume</th>
              <th style="vertical-align:middle">Unit</th>
              <th style="vertical-align:middle">Rebate Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr id="Row2">
              <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
              <td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
              <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
              <td>
                <div class="btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Units
                  <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Microsecond</a></li>
                    <li><a href="#">oz</a></li>
                    <li><a href="#">ml</a></li>
                    <li><a href="#">L</a></li>
                    <li><a href="#">gms</a></li>
                  </ul>
                </div>
              </td>
              <td>
                <input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
              </td>
            </tr>            
            <tr>
              <td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
              <td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
              <td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
              <td>
                <div class="btn-group">
                  <select name="units[]" class="form-control">
                    <option value=""  selected='selected'>Select Unit</option>
                    <option value="5" >Microsecond</option>
                    <option value="7" >oz</option>
                    <option value="9" >ml</option>
                    <option value="10" >L</option>
                    <option value="12" >gms</option>
                  </select>
                </div>
              </td>
              <td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
            </tr>                      
          </tbody>
        </table>
        <button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
      </div>
    </div> <!-- /span8 -->    
    <div class="row">
      <div  class="col-xs-5"></div>
      <div style="margin-left: -9px"  class="col-xs-5">
        <button type="button" class="btn btn-default">Go Back</button>
        <button type="submit" class="btn btn-primary">Preview</button>
      </div>                
    </div>
  </div>
</form>

I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The jQuery code I writen for adding rows dynamically is as follows:

/*JQuery for appending rows at the end of table*/
<script language="javascript"> 
$( document ).ready(function() {
  $('.btnAdd').click(function () {
    var count = 1,
    first_row = $('#Row2');
    //while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
      while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
  });
});
</script>

Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields from each appended row and submit the form by clicking on Submit button, in $_POST I'm not able to get the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also?

The HTMl code of dynamically appended table row is as follows:

<tr>
  <td>
    <input class="form-control" type="text" size="8" value="" name="pack[]">
  </td>
  <td>
    <input class="form-control" type="text" size="8" value="2" name="quantity[]">
  </td>
  <td>
    <input class="form-control" type="text" size="8" value="750" name="volume[]">
  </td>
  <td>
    <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
      Units
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li>
          <a href="#">Microsecond</a>
        </li>
        <li>
          <a href="#">oz</a>
        </li>
        <li>
          <a href="#">ml</a>
        </li>
        <li>
          <a href="#">L</a>
        </li>
        <li>
          <a href="#">gms</a>
        </li>
      </ul>
    </div>
  </td>
  <td>
    <input class="form-control" type="text" size="9" value="3.00" name="amount[]">
  </td>
</tr>

Answer 1

Well, you have done the right thing. Please see the name field of your input element.

<input type="text" name="pack[]" value="" class="form-control" size="8"/>

Please notice the name="pack[]" using an array of name as input. If you have cloned the table, the input element will be cloned. Since you aren't using an id, it's not a problem.

Now, when sending the data, in rebates.php check if the form data is present. It can be done by checking up the request method. It's a secure way. Once the check has succeeded, you can check if the field is present

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // handle the fields
    $packs = null;
    if (isset($_POST['pack']) {
        $packs = $_POST['pack'];
    }
}

Please notice that you are using pack without the [] to get input data from pack[] input fields. The variable $pack will contain an array. If you want to check the content, use var_dump($pack); . It should reveal all data from the available pack[] elements, either added dynamically or statically.

Then, if you have collected all data, you have to loop through it. It can be done with either for- or foreach-loop.

if ($packs != null) {
    foreach($packs as $pack) {
        // use the field $pack to do something
        echo 'amount of pack : ' . $pack;
    }
}

Do the same for other name fields which is also from array.

Answer 2

From jQuery Doc:

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

You are cloning table row with #Row2 id. To avoid it:

first_row.clone().removeAttr('id').appendTo('#blacklistgrid');

Answer 3

或者，您可以执行类似...

while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' +              $('#blacklistgrid tr').length);