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.
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? 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. 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
. They transparently get populated into the object I have on PHP side, with ordered indices starting from 0.
add_row()
is now this:
<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
$(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
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. 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
. They transparently get populated into the object I have on PHP side, with ordered indices starting from 0.
add_row()
is now this:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.