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