在按钮上添加输入字段，点击PHP中的数据

Question

我正在尝试在按钮上添加输入字段，单击我应该工作的所有内容，但需要做3件事：我需要这样的值来输出2{{ $formData['member_2'] }}对于数字1，我正在将此添加到下面的值中：value="{{ $formData['member_'.'+ i +'] }}"但我的输出没有返回member_+ i +member_2然后我需要设置一个限制，只能创建7个输入字段。最后，当我删除一行时，我需要它来删除计数。这是我的完整代码。为了便于阅读，我删除了样式。网页：<button type="button" name="add" id="add">Add Other Members</button><div id="dynamic_field"></div>JS：$(document).ready(function() {    var i=1;     $('#add').click(function() {        i++;        $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>')    });    $(document).on('click', '.btn_remove', function() {        var button_id = $(this).attr("id");        $('#row' + button_id + '').remove();    });});运行代码段以查看问题 2 和 3。（请注意，删除输入时，计数不会重新启动。它从它离开的地方继续。$(document).ready(function() {    var i=1;     $('#add').click(function() {        i++;        $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>')    });    $(document).on('click', '.btn_remove', function() {        var button_id = $(this).attr("id");        $('#row' + button_id + '').remove();    });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button type="button" name="add" id="add">Add Other Members</button><div id="dynamic_field"></div>

Answer 1

问题 2 和 3 非常简单。您只需要在删除成员时递减变量。另外，当.ii>=7

$(document).ready(function() {

  var i = 1;

  $('#add').click(function() {

    if (i <= 7) {

      $('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="' + i + '">X</button></div>')

      i++;

    }

  });

  $(document).on('click', '.btn_remove', function() {

    var button_id = $(this).attr("id");

    i--;

    $('#row' + button_id + '').remove();

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" name="add" id="add">Add Other Members</button>

<div id="dynamic_field"></div>

使用此方法时会遇到的问题是，删除列表中间的元素会弄乱顺序。您最终会得到重复的元素。

您可以通过仅允许删除最后一个元素来解决此问题。

$(document).ready(function() {

  var i = 1;

  $('#add').click(function() {

    if (i <= 7) {

      $('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""></div>')

      i++;

      $('.btn_remove').removeClass('hidden');

    }

  });

  $(document).on('click', '.btn_remove', function() {

    var button_id = $(this).attr("id");

    i--;

    $('#row' + $('#dynamic_field div').length).remove();

    if (i<=1) {

      $('.btn_remove').addClass('hidden');

    }

  });

});

.hidden {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add">Add Other Members</button>

<div id="dynamic_field"></div>

<button type="button" class="btn_remove hidden">Remove last</button>

关于第一个问题，我猜双花括号是服务器端模板的东西（就像Laravel的Blade一样）。在这种情况下，它是在将页面发送到客户端之前在服务器端生成的。这意味着，在JS有机会被执行之前。您的服务器端代码不知道 。i

如果您使用 PHP 在服务器中生成元素，则不能使用 ，因为服务器端不知道该变量。但是，你不应该需要它。i

如果您使用JS动态生成元素，则不能在其中使用PHP模板。为时已晚，代码已在客户端中执行。您可以做的是使用PHP创建一个JS对象，其中包含创建元素所需的所有信息。像这样：

echo "<script>var myJsData=" . json_encode($myPHPdata) . ";</script>";

然后，您可以使用它通过JS在客户端中动态生成元素。

Answer 2

好的，你需要做3件事：

1. 获取创建的输入，以便对下一个索引进行计数和获取下一个索引

2. 插入次数

3. 获取上次创建的用于重置计数器的输入，但避免重复的 ID 和名称

$(document).ready(function() {

    var i=0; 

    $('#add').click(function() {

        // Get inputs created (if any)

        var inputs = $('input');

        // Verify if there are 7 or more inputs

        if(inputs.length >= 7) {

            console.log('Only seven inputs allowed');

            return;

        }

        // Get last input to avoid duplicated IDs / names

        if(inputs.last().length > 0) {

            // Split name to get only last part of name, the numeric one

            i = parseInt(inputs.last()[0].name.split('_')[1]);

        }

        i++;

        $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>')

    });

    $(document).on('click', '.btn_remove', function() {

        var button_id = $(this).attr("id");

        $('#row' + button_id + '').remove();

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" name="add" id="add">Add Other Members</button>

<div id="dynamic_field"></div>