1

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

4

3 回答 3

4

最好的方法是制作你的字段并将它们放入 adiv然后隐藏它。对第一行使用 jQuery .clone，然后在用户单击add链接时更新字段名称。

于 2012-12-07T02:06:23.087 回答
1

您可以使用像 mustache 或 handlebars 这样的模板库。您也可以使用 jQuery 来执行此操作。我的方法是动态生成新元素。我不会隐藏它，以便用户可以查看他是否已经在输入重复项。但是如果你想让你的标记更清晰，你也可以在用户已经输入了一些内容后隐藏该字段。所以当用户点击添加按钮时，你需要检查用户是否真的输入了一些东西，如果有输入，则隐藏它，然后再次生成一个新的输入。

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

于 2012-12-07T02:12:06.853 回答
1

这是我不久前在自己的网站上写的一些 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" />
于 2012-12-07T02:15:07.700 回答