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

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:

我有一个HTML表单。此表单包含HTML表。实际的HTML表非常大。作为参考,我在下面显示了一个表单的HTML代码,其中tablw只包含两个记录:

<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代码如下:

/*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?

现在我面临的问题是,如果我在表的末尾附加一行或多行,在每个附加行的文本字段中填充数据并通过单击“提交”按钮提交表单,在$ _POST中我无法获得附加行的数据。我只从页面加载时先前存在的行中获取数据。那么任何人都可以帮我从动态追加的行中获取值吗?

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

动态附加表行的HTMl代码如下:

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

3 个解决方案

#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.

请注意名称=“pack []”使用名称数组作为输入。如果已克隆表,则将克隆输入元素。由于您没有使用id,因此不是问题。

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

现在,在发送数据时,在rebates.php中检查表单数据是否存在。可以通过检查请求方法来完成。这是一种安全的方式。检查成功后,您可以检查该字段是否存在

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.

请注意,您正在使用不带[]的pack来从pack []输入字段获取输入数据。变量$ pack将包含一个数组。如果要检查内容,请使用var_dump($ pack);.它应该显示来自可用pack []元素的所有数据,可以动态添加也可以静态添加。

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

然后,如果您已经收集了所有数据,则必须循环访问它。它可以使用for-或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.

对同样来自数组的其他名称字段执行相同的操作。

#2

From jQuery Doc:

来自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.

注意:使用.clone()具有生成具有重复id属性的元素的副作用,这些属性应该是唯一的。在可能的情况下,建议避免使用此属性克隆元素或使用类属性作为标识符。

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

您正在使用#Row2 id克隆表行。为了避免它:

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

#3

Alternatively, you could do something like...

或者,你可以做点什么......

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