时间戳

首页 > 解决方案 > 使用来自 PHP 的数据在单击按钮时添加输入字段

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

问题描述

我正在尝试在按钮上添加输入字段，单击我应该正常工作的所有内容，但需要做 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();
    });
});

运行代码片段以查看问题 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>

标签： javascriptphplaravel-blade

解决方案

2 和 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 的客户端中动态生成您的元素。

推荐阅读