使用来自 PHP 的数据在单击按钮时添加输入字段

Question

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

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

对于数字 1，我将其添加到以下值：

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

但我的输出返回 member_+ i + 而不是 member_2

1. 然后我需要限制只能创建 7 个输入字段。
2. 最后，当我删除一行时，我需要它来删除计数。

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

HTML：

<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();
    });
});

运行 sn-p 以查看问题 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 y 3 的问题非常简单。您只需要在删除成员时减少变量i。另外，i>=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>