I'll try to explain this logically as best as I can. Basically I have a facility on my site whereby users can enter their employment history. This is a form with input fields. To make things easier I have a jQuery function that clones these input fields and allows the user to enter multiple records at once.
Whilst adding new records the user may wish to remove a record from the list, in which case they can press the 'remove' link next to each record.
HTML (1 Item):
<div class="history-form-fields">
<div class="row">
<label for="History_0_type">Type</label>
<select name="History[0][type]" id="History_0_type">
<option value="">Select</option>
</select>
</div>
<div class="row">
<label for="History_0_name">Name</label>
<input type="text" name="History[0][name]" id="History_0_name" />
</div>
<div class="row">
<label for="History_0_year">Year</label>
<select name="History[0][year]" id="History_0_year">
<option value="">Select</option>
</select>
</div>
</div>
<input id="add" type="button" value="Add Another" />
JS:
<script type="text/javascript">
var counter = <?php echo $historyCount; ?>;
$('#add').click(function(){
var divCloned = $('.history-form-fields:first').clone();
divCloned.insertAfter('.history-form-fields:last');
initNewInputs(divCloned.children('.row'), ++counter);
});
$('.remove').live('click', function(){
$(this).parent().remove();
return false;
});
</script>
In the above JS code, the $historyCount variable is set beforehand in my PHP script:
$historyCount=isset($_POST['History']) ? count($_POST['History'])-1 : 0;
So for example when the form is posted, if there were multiple records on the page and there are some validation errors, then the form is redisplayed showing those same records.
There is also a call to a function initNewInputs() which is passed in the new
counter value. This is so that new form input elements can receive unique ID and NAME attributes (in the HTML code above you can see the integer indexes within the attribute values).
This is all working fine. The issue I'm having is in the following scenario:
User starts adding in new records
- Record 1 - Count 0
- Record 2 - Count 1
- Record 3 - Count 2
- Record 4 - Count 3
- Record 5 - Count 4
User removes Records 3 & 4 (so we now only have 3 records). Record 5 is now Record 3 but maintains the same Count value (4).
User then adds in a new record:
- Record 4 - Count 5
- Record 4 - Count 5
User posts the form - there are some validation errors so the form is redisplayed. The PHP script determines that it received 4 records, so it pre-sets the count to 3.
User decides to add a new record whilst fixing the errors
- Record 5 - Count 4
This is where the problem arises - a record with the count value of 4 already exists on the page. I.e. it has now created input elements with the same ID and NAME attribute values as one that is already on the page.
I know this is a little bit difficult to understand but I would appreciate any help. It will most likely require modification of how the counter is set.
