如何将JavaScript变量传递到动态表单的新增行？

你的问题核心出在PHP与JavaScript的运行时机不匹配上——PHP是服务器端在页面加载前就执行完毕的，而你的uid是客户端JS里动态变化的变量，直接在模板里用<?php echo ... ?>去获取JS的uid根本行不通，因为这时候JS还没开始运行呢！

下面是具体的解决方案，修改你的代码就能实现需求：

步骤1：调整新增行模板 #

把模板里的输入框value留空，去掉无效的PHP代码，同时优化重复ID的问题：

<script type="text/template" id="temSpecification">
  <div class="form-group row" style="padding-top:10px;">
    <label for="name" class="col-sm-1 form-control-label">Item</label>
    <div class="col-sm-2">
      <!-- 留空value，后续用JS动态赋值；把id改为数组式name，避免重复ID问题 -->
      <input type="text" class="form-control" name="inputc[]" value="">
    </div>
    <div class="box-tools">
      <a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Remove">
        <i class="fa fa-times"></i>
      </a>
    </div>
  </div>
</script>

步骤2：修改JavaScript逻辑 #

在添加新行时，动态将当前uid值赋值给新行的输入框：

$(document).ready(function (event) {
  // 用let声明变量，避免全局变量污染
  let uid = 1;
  let uvd = 2;

  $('#btnAddMoreSpecification').click(function () {
    // 将模板内容转为jQuery对象，方便操作DOM元素
    let $newRow = $($('#temSpecification').html());
    // 找到新行里的输入框，设置value为当前uid
    $newRow.find('input[name="inputc[]"]').val(uid);
    // 将修改后的新行添加到目标容器
    $('#divSpecificatiion').append($newRow);
    // uid自增，为下一行做准备
    uid++;
    uvd++;
  });

  $(document).on('click', '.btnRemoveMoreSpecification', function () {
    // 用closest()更简洁地定位要删除的行
    $(this).closest('.form-group.row').remove();
  });
});

为什么之前的方法无效？ #

再明确一下核心逻辑：

• PHP在服务器处理请求阶段就已经执行完毕，所有PHP代码会被替换成静态内容输出到浏览器；
• JavaScript是在浏览器加载完页面后才运行的，此时PHP的执行流程已经完全结束，根本无法获取JS里的动态变量。

你之前的写法相当于让PHP输出一段JS代码，但这段JS要到浏览器端才会执行，PHP早就跑完了，自然得不到正确的uid值。

这样修改后，每次点击添加按钮，新行的输入框就会自动填入当前的uid值，完全符合你的需求。

内容的提问来源于stack exchange，提问作者optimus