Question

我希望对实现以下目标的最佳方法有所了解。我想创建一个表单，以便在单击+或add按钮时添加更多字段。因此，例如，用户将填写文本字段，将其称为“描述”，然后在其旁边另一个称为“单元号”的字段。我想允许多个“描述”和“单元号”字段，而不是在每次输入后提交表单，但是为了保持站点看起来“干净”我不希望有几个重复的字段，如果仅用户需要将信息输入其中一个。我正在考虑使用JavaScript来隐藏其他字段，只需设置display:none即可。这是一个好的/有效的解决方案吗？有更好的解决方案吗？我是编程新手，所以如果你觉得这是一个愚蠢的问题，请放轻松。

Answer 1

执行此操作的最佳方法是创建字段并将其放在div中然后隐藏它。使用jQuery .clone第一行，然后在用户点击add链接时更新字段名称。

Answer 2

您可以使用小胡子或把手等模板库。你也可以使用jQuery来做到这一点。我的方法是动态生成新元素。我不会隐藏它，以便用户可以看到他是否已经输入重复。但是如果你想让你的标记更干净，你也可以在用户输入内容后隐藏该字段。因此，当用户点击添加按钮时，您需要检查用户是否实际输入了某些内容，如果有输入，则隐藏它然后再次生成新输入。

如果您需要代码示例，请随时提问。

Answer 3

这是我之前在我自己的网站上写的一些javascript：

 var SITE = SITE || {};

SITE.fileInputs = function() {
  var $this = $(this),
      $val = $this.val(),
      valArray = $val.split('\\'),
      newVal = valArray[valArray.length-1],
      $button = $this.siblings('.button'),
      $fakeFile = $this.siblings('.file-holder');
  if(newVal !== '') {
    $button.text('File Chosen');
    if($fakeFile.length === 0) {
      $button.after('<span class="file-holder">' + newVal + '</span>');
    } else {
      $fakeFile.text(newVal);
    }
  }
};
var counter = 1;
var limit = 5;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<span class=\"file-wrapper\"><input type=\"file\" name=\"screenshot[]\" id=\"screenshot\" /><span class=\"button\">Choose a screenshot</span></span>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
          $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
     }
}
$(document).ready(function(){
    $("#addss").click(function(){
        addInput("screenshots");
    });
});

然后你可以使用数组作为php中的名称或者你用来处理数据的其他任何东西。

HTML：

<div id="screenshots">
     <span class="file-wrapper">
           <input type="file" name="screenshot[]" class="screenshot" />
           <span class="button">Choose a screenshot</span>
     </span>
</div>
<input type="button" id="addss" value="+Screenshot" class="btn" />

添加/显示其他表单字段的最佳方式

3 个答案: