将javascript变量传递给动态表单

Question

我正在使用动态表单。

我想传递javascript值以追加行。在这里我如何将uid值传递给追加的行。我在附加行中尝试了<?php echo $uid = "<script>document.write(uid)</script>"; ?>。

但它没有用。
这是我的代码

默认行

<div class="form-group row">
  <?php $uid = '1';?>
  <label for="name" class="col-sm-1 form-control-label">Item</label>
  <div class="col-sm-2">
    <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
  </div>

  <div class="box-tools">
    <a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">
      <i class="fa fa-plus"></i>
    </a>
  </div>
</div>
<div id="divSpecificatiion">
</div>

追加行

<script type="text/template" id="temSpecification">
  <div class="form-group row" style="padding-top:10px;">

    <?php $uid ='';  ?>

    <label for="name" class="col-sm-1 form-control-label">Item</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
    </div>

    <div class="box-tools">
      <a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
</script>

$(document).ready(function (event) {
uid=1;uvd=2;$('#btnAddMoreSpecification').click(function ()
{$('#divSpecificatiion').append($('#temSpecification').html());uid++;uvd++; });

 $(document).on('click', '.btnRemoveMoreSpecification', function () {
      $(this).parent('div').parent('div').remove();
 });
});

输出应该是这样的

Answer 1

使用类似的东西：

$(document).ready(function(event) {
  uid = 1;
  uvd = 2;
  $('#btnAddMoreSpecification').click(function() {
uid++;
    var templateHtml = $('#temSpecification').html();//save the html in a variable
    var temp = $(templateHtml).find('input[type="text"]').val(uid).end();//find the input and append the new uid
    $('#divSpecificatiion').append(temp);//append the new html to the div
  });

  $(document).on('click', '.btnRemoveMoreSpecification', function() {
    $(this).parent('div').parent('div').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
  <?php $uid = '1';?>
  <label for="name" class="col-sm-1 form-control-label">Item</label>
  <div class="col-sm-2">
    <input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
  </div>

  <div class="box-tools">
    <a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">Add more
      <i class="fa fa-plus"></i>
    </a>
  </div>
</div>
<div id="divSpecificatiion">
</div>


<script type="text/template" id="temSpecification">
  <div class="form-group row" style="padding-top:10px;">

    <?php $uid ='';  ?>

    <label for="name" class="col-sm-1 form-control-label">Item</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="" id="inputc" value="">
    </div>

    <div class="box-tools">
      <a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
</script>