[英]How can I dynamically remove HTML form elements generated by Zend Form API, using JavaScript?
I am using PHP Zend Form API library, which generates HTML form code for multiple elements and provides a mechanism to add field elements dynamically via JavaScript. 我正在使用PHP Zend Form API库,该库为多个元素生成HTML表单代码,并提供了一种通过JavaScript动态添加字段元素的机制。
The Add works great, but how can I remove an element? 添加效果很好,但是如何删除元素?
Also, if you look at the code, when new elements are added, the index count is updated. 另外,如果您查看代码,则在添加新元素时,索引计数也会更新。 Thus, if I do remove an element, and later add one, my index number will be incorrect.
因此,如果我确实删除了一个元素,后来又添加了一个元素,那么我的索引号将是错误的。 I think it will be a bit of a pain to actually renumber the indices.
我认为实际重新编号索引会有些麻烦。 Thus, I think it's best to remove the code that adds the index and just not put one in. I believe that way they will be numbered properly anyway on form submit
因此,我认为最好删除添加索引的代码,而不要放入索引。我相信这样一来,无论如何在表单提交中对它们进行正确的编号
Still though, how can I remove individual element rows? 不过,如何删除单个元素行? The ones that are wrapped by
<fieldset>
tags? 被
<fieldset>
标签包裹的标签? I am looking for a good direction on how to do it. 我正在寻找如何做一个好的方向。
function add_row() { var currentCount = $('form > fieldset > fieldset').length; var template = $('form > fieldset > span').data('template'); template = template.replace(/__index__/g, currentCount); $('form > fieldset').append(template); return false; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="return add_row()">Add a new form row</button> <form action="" id="selection" method="post" name="selection"> <fieldset> <fieldset> <label><span>Flow:</span><input name="points[0][flow]" type="number" value="3"></label><label><span>Pressure:</span><input name="points[0][pressure]" type="number" value="3"></label> </fieldset> <fieldset> <label><span>Flow:</span><input name="points[1][flow]" type="number" value="3"></label><label><span>Pressure:</span><input name="points[1][pressure]" type="number" value="3"></label> </fieldset><span data-template="<fieldset><label><span>Flow:</span><input type="number" name="points&#x5B;__index__&#x5D;&#x5B;flow&#x5D;" value=""></label><label><span>Pressure:</span><input type="number" name="points&#x5B;__index__&#x5D;&#x5B;pressure&#x5D;" value=""></label></fieldset>"></span> </fieldset> </form>
I rewrote add_row()
method to have a strictly increasing index, instead of using fieldset count, since removing a row removes index at that row, and does not keep track of last index. 我重写
add_row()
方法以使其具有严格增加的索引,而不是使用字段集计数,因为删除行会删除该行的索引,并且不会跟踪最后一个索引。 Adding rows must add index that is larger than the last index. 添加行必须添加比上一个索引大的索引。
After deleting/adding rows indices may be sparse, ie 0, 2, 6, 16
. 在删除/添加行之后,索引可能很稀疏,即
0, 2, 6, 16
。 They transparently get populated into the object I have on PHP side, with ordered indices starting from 0. 它们透明地填充到我在PHP端拥有的对象中,其索引从0开始。
add_row()
is now this: add_row()
现在是这个:
<div id="newRowIndex" style="display:none">1</div>
<script>
function add_row()
{
var newRowIndex = $('#newRowIndex').text();
$('#newRowIndex').text(++newRowIndex);
var template = $('form > fieldset > span').data('template');
template = template.replace(/__index__/g, newRowIndex);
$('form > fieldset').append(template);
return false;
}
</script>
Add a button to each row 向每行添加一个按钮
<fieldset>
<label><span>Flow:</span><input name="points[0][flow]" type="number" value="3"></label>
<label><span>Pressure:</span><input name="points[0][pressure]" type="number" value="3"></label>
<button class="removeLine">Delete Row</button>
</fieldset>
and a little jquery 和一个小jQuery
$(function(){
$("#selection").on("click",".removeLine",function(){
$(this).closest("fieldset").remove();
return false;
});
});
You can add the remove button dynamically. 您可以动态添加删除按钮。 just put addRemove() before the return false in the add_row function and include the below
只需将addRemove()放在add_row函数的return false之前,并包括以下内容
function addRemove(){
$("form fieldset fieldset").last().append("<button class='removeLine'>Delete Row</button>");
}
I rewrote add_row()
method to have a strictly increasing index, instead of using fieldset count, since removing a row removes index at that row, and does not keep track of last index. 我重写
add_row()
方法以使其具有严格增加的索引,而不是使用字段集计数,因为删除行会删除该行的索引,并且不会跟踪最后一个索引。 Adding rows must add index that is larger than the last index. 添加行必须添加比上一个索引大的索引。
After deleting/adding rows indices may be sparse, ie 0, 2, 6, 16
. 在删除/添加行之后,索引可能很稀疏,即
0, 2, 6, 16
。 They transparently get populated into the object I have on PHP side, with ordered indices starting from 0. 它们透明地填充到我在PHP端拥有的对象中,其索引从0开始。
add_row()
is now this: add_row()
现在是这个:
<div id="newRowIndex" style="display:none">1</div>
<script>
function add_row()
{
var newRowIndex = $('#newRowIndex').text();
$('#newRowIndex').text(++newRowIndex);
var template = $('form > fieldset > span').data('template');
template = template.replace(/__index__/g, newRowIndex);
$('form > fieldset').append(template);
return false;
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.