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

时间:2014-04-23 11:08:08

标签: javascript jquery html forms post

我有一个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>

我通过点击按钮动态地将行附加到表格(按钮出现在标签中,您可以在上面的代码中看到)。我为动态添加行而编写的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>

现在我遇到的问题是,如果我在表格末尾附加一行或多行,请在每个附加行的文本字段中填充数据,然后点击{{1}中的“提交”按钮提交表单我无法从追加的行中获取数据。我只从页面加载时先前存在的行中获取数据。那么有人可以帮助我从动态追加的行中获取值吗?

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

$_POST

3 个答案:

答案 0 :(得分:1)

嗯,你做得对了。请参阅输入元素的名称字段。

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

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

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

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

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

然后,如果您收集了所有数据,则必须循环访问它。它可以使用for-或foreach-loop来完成。

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

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

答案 1 :(得分:0)

来自jQuery Doc:

  

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

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

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

答案 2 :(得分:0)

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

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