I have dynamic input fields generated from a jquery function. There is the ability to add or delete through button clicks these input fields. The fields are populated with data from mysql table. Each populated input has a unique ID fetched from the DB. When adding a new field I am getting the next AUTO_INCREMENT from an ajax request. I am then able to increment +1 but for all fields. I only want to do this for the new fields. If by some reason an insert query transaction is made from another app it will update start increment from field and then update the rest with the correct values (check to see what I mean jsFiddle(http://jsfiddle.net/f9XP8/2/).
The problems is how to put it all together. I just want to follow to able to add a new field and assign it the appropriate next person_id for db insert. LIVE EXAMPLE
<script>
$(document).ready(function () {
var $increment_num = $('#increment_num');
var interval = 100; //3000 = 3 seconds
function doAjax() {
$.ajax({
type: 'POST',
url: 'personAutoIncrement.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
var $cloned = $('#input_table tr');
var num = parseInt(data);
$increment_num.val(num);
$cloned.each(function(i){
$(this).find('[name^="increment_id"]').first().val(num+i);
})
},
complete: function (data) {
// Schedule the next
setTimeout(doAjax, interval);
}
});
}
setTimeout(doAjax, interval);
var click_count = 0;
$('#btnAdd').click(function () {
click_count++;
var $clones = $('#input_table tr'),
num = $clones.size() + 1,
next_num = parseInt($clones.last().find('input[name^="increment_id"]').val()) + 1,
$template = $clones.first(),
newSection = $template.clone().attr('id', 'pq_entry_'+num),
ident = 'increment_id_'+num;
person_id = 'person_id_'+num;
person_fname = 'person_fname_'+num;
person_lname = 'person_lname_'+num;
// clear out all sections of new input
newSection.find('input').not('[name^="increment_id"]').val('');
newSection.find('input[name^="increment_id"]').attr({
'id': ident,
'name': ident
}).val(/*next_num*/);
newSection.find('input[name^="person_id"]').attr({
'id': person_id,
'name': person_id
}).val(/*next_num*/);
newSection.find('input[name^="person_fname"]').attr({
'id': person_fname,
'name': person_fname
}).val(/*next_num*/);
$('#input_table').append(newSection);
$('#btnDel').prop('disabled', '');
if (num == 100) $('#btnAdd').prop('disabled', 'disabled');
});
$('#btnDel').click(function () {
var num = $('.clonedSection').length; // how many duplicate input fields we currently have
$('#pq_entry_' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled', '');
// if only one element remains, disable the "remove" button
if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');
});
$('#btnDel').prop('disabled', 'disabled');
});
</script>
html
<table>
<thead>
<tr>
<th>ID from DB</th>
<th>First Name</th>
</tr>
</thead>
<tbody id="input_table">
<tr id="pq_entry_1">
<td><input type="text" id="increment_id_1" name="increment_id_1" readonly value="5" /></td>
<td><input type="text" name="first_name" placeholder="First Name" /></td>
</tr>
</tbody>
</table>
<input type='button' id='btnAdd' value='add text box' />
<input type='button' id='btnDel' value='Delete' /></br>
</table>
