我不确定如何询问我正在寻找的搜索指南。我正在构建一个表单,其中一个条目要求用户列出一个设备,其电压,瓦,安培,相位等。
我想要一个简单的行"X"列提供一个设备的文本区域,然后使用jquery/html点击链接"添加另一个设备"的能力。
我喜欢使用占位符文本来节省页面空间。我可以得到所有这些设置只是很好为一个单一的条目,如'name',但我不知道如何实现一个'add entry'行。所有的数据都通过PHP存储在MySQL中。
那么A:这种类型的表单部分的名称是什么?B:当我们想让用户向这个部分添加一行时,它叫什么?
我喜欢把事情弄得比实际困难。这是我的专长。我猜:)
编辑:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit使用这种格式,每个条目有5列(虽然它将全部在一行/行),我想有一个"添加条目"链接,生成一个新的空白条目选项。
#elecNeeds input[type=text], textarea {
font-size: 12px;
font-style: italic;
width: 15%;
height: 20px;
padding: 10px;
color: #212323;
background: #E3E3E3;
background: rgba(255, 255, 255, 0.5);
border: 2px #000 solid;
margin-bottom: 10px;
position: relative;
behavior: url(/js/PIE.htc);
}
<div id="elecNeeds">
<input type="text" name="appliance" placeholder="Type of Equipment">
<input type="text" name="voltage" placeholder="Voltage">
<input type="text" name="watts" placeholder="Watts">
<input type="text" name="amps" placeholder="Phase">
<input type="text" name="notes" placeholder="Notes">
<br /> Add an appliance
</div>
我不知道它叫什么,但你可能想要这个- http://jsfiddle.net/uPWkf/1/
<form method="post" action="#" id="myForm">
<div id="nameFields">
<label>Watt <input type="text" name="watt0" /></label>
<label>Volt <input type="text" name="volt0" /></label>
<label>Amp <input type="text" name="amp0" /></label><br/><br />
</div>
<input type="submit" value="submit" id="submit" />
</form>
<a href="#" onclick="return false;" id="addRow">Add New Row</a>
和JS
var i = 1;
$("#addRow").click(function() {
$("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />');
i++;
});
$('#myForm').submit(function() {
var values = $('#myForm').serialize();
alert(values);
});
我认为您需要使用$(selector).append('<code>');
函数。例如:
<a href="#" class="add">Add</a>
<table class="my_fuits">
<tr>
<td>Fruit</td>
<td><input type="text" name="fuits[]" /></td>
</tr>
</table>
和js(jQuery)代码:
$(document).ready(function(){
// add one more row
$(".add").live('click',function(){
$(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[<a href="#" class="remove">X</a>]</td></tr>');
return false;
});
// remove row
$(".remove").live('click',function(){
$(this).parent().parent().remove();
return false;
});
});