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

Question

我正在尝试在按钮上添加输入字段，单击我应该工作的所有内容，但需要做3件事：

1. 我需要这样的值来输出2{{ $formData['member_2'] }}

对于数字1，我正在将此添加到下面的值中：

value="{{ $formData['member_'.'+ i +'] }}"

但我的输出没有返回member_+ i +member_2

1. 然后我需要设置一个限制，只能创建7个输入字段。

2. 最后，当我删除一行时，我需要它来删除计数。

这是我的完整代码。为了便于阅读，我删除了样式。

网页：

<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() {&nbsp; var i = 1;&nbsp; $('#add').click(function() {&nbsp; &nbsp; if (i <= 7) {&nbsp; &nbsp; &nbsp; $('#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>')&nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; }&nbsp; });&nbsp; $(document).on('click', '.btn_remove', function() {&nbsp; &nbsp; var button_id = $(this).attr("id");&nbsp; &nbsp; i--;&nbsp; &nbsp; $('#row' + button_id + '').remove();&nbsp; });});<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() {&nbsp; var i = 1;&nbsp; $('#add').click(function() {&nbsp; &nbsp; if (i <= 7) {&nbsp; &nbsp; &nbsp; $('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""></div>')&nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; $('.btn_remove').removeClass('hidden');&nbsp; &nbsp; }&nbsp; });&nbsp; $(document).on('click', '.btn_remove', function() {&nbsp; &nbsp; var button_id = $(this).attr("id");&nbsp; &nbsp; i--;&nbsp; &nbsp; $('#row' + $('#dynamic_field div').length).remove();&nbsp; &nbsp; if (i<=1) {&nbsp; &nbsp; &nbsp; $('.btn_remove').addClass('hidden');&nbsp; &nbsp; }&nbsp; });});.hidden {&nbsp; 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&nbsp;"<script>var&nbsp;myJsData="&nbsp;.&nbsp;json_encode($myPHPdata)&nbsp;.&nbsp;";</script>";然后，您可以使用它通过JS在客户端中动态生成元素。

Answer 2

好的，你需要做3件事：获取创建的输入，以便对下一个索引进行计数和获取下一个索引插入次数获取上次创建的用于重置计数器的输入，但避免重复的 ID 和名称$(document).ready(function() {&nbsp; &nbsp; var i=0;&nbsp;&nbsp; &nbsp; $('#add').click(function() {&nbsp; &nbsp; &nbsp; &nbsp; // Get inputs created (if any)&nbsp; &nbsp; &nbsp; &nbsp; var inputs = $('input');&nbsp; &nbsp; &nbsp; &nbsp; // Verify if there are 7 or more inputs&nbsp; &nbsp; &nbsp; &nbsp; if(inputs.length >= 7) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Only seven inputs allowed');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // Get last input to avoid duplicated IDs / names&nbsp; &nbsp; &nbsp; &nbsp; if(inputs.last().length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Split name to get only last part of name, the numeric one&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i = parseInt(inputs.last()[0].name.split('_')[1]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; $('#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>')&nbsp; &nbsp; });&nbsp; &nbsp; $(document).on('click', '.btn_remove', function() {&nbsp; &nbsp; &nbsp; &nbsp; var button_id = $(this).attr("id");&nbsp; &nbsp; &nbsp; &nbsp; $('#row' + button_id + '').remove();&nbsp; &nbsp; });});<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>