Я думаю, что есть несколько способов решить вашу проблему.
Этот может быть быстрее и немного элегантнее. Вам нужно будет создать массив действий и затем отправить их через AJAX на сервер. Позвольте мне объяснить:
предположим, что ваши поля "phone" с классом "phone" и DIV-оберткой с "id":
Пример: (Идентификатор может быть идентификатором вашей БД или телефона с префиксом (как я показываю). Или, если хотите, вы можете сначала добавить их в массив и назначить временный идентификатор. Таким образом, вы можете проверить изменения на конец).
<div id="p_18003526445">
<input type="text" class="phone" value="1800-3526-445" />
<button class="del">Delete</button>
</div>
...
<button id="add">Add More...</button>
<button id="save">Save Changes</button>
Теперь JQuery:
var phones = new Array();
var new_id = 0; //keep track of added ids
$(window).load(function() {
$("input.phone").change(function() {
//you could check here if the phone id is the same as the val... (and skip)
phones[$(this).parent().attr("id")] = $(this).val();
});
$("button.del").click(function() {
var id = $(this).parent().attr("id");
$(this).prev("input.phone").val("deleted"); //setting to "deleted"
$("#"+id).hide(); //hide the DIV (input + button)
});
$("#add").click(function() {
new_id++;
$("#main").append("<div id='n_"+new_id+"'>
<input type='text' class='phone' />
<button class='del'>Delete</button>
</div>");
});
$("#save").click(function() {
$.post("save.php",{ phones : $.toJSON(phones) },
function(reply, status){
if(status == "success" && reply == "OK") {
alert("UPDATED!");
} else {
alert("ERROR: Try again");
}
}
);
});
});
Теперь в вашем «save.php» вам нужно будет выполнить что-то вроде:
<?php
$import = json_decode($_POST["phones"]);
if($import) {
$phones = array();
foreach($import as $i => $p) {
$phones[$i] = $p;
}
}
//print_r($phones);
...
echo "OK"; //Tell JQuery everything went fine!
?>
В вашем PHP у вас теперь будет массив с идентификатором и действием для выполнения. Если действие «удалено», вы продолжаете его удалять (помните, что идентификатор будет p _ #####), если это число, то обновите, и если идентификатор начинается с «n_», то его новое. Другой способ - создать 3 отдельных массива, один для обновления, один для удаления и один для вставки, и отправить их отдельно. Но я решил сделать это так для простоты. Кроме того, вы можете выполнить некоторые проверки перед отправкой списка.
Вам больше не нужен тег «form» и действия javascript внутри ваших тегов.
Я рекомендую вам использовать плагин JSON Jquery , если вы хотите полной совместимости (JQuery -> PHP).
Этот код не проверен и не закончен, это всего лишь идея ... вам нужно будет его реализовать. Если вы хотите, вы можете добавить диалоговое окно JQuery UI для отображения «Пожалуйста, подождите ...» во время передачи формы на сервер.
Если вы хотите продолжать свой подход, вы всегда можете изменить входной ТИП:
$("#disa_num input").attr("type","hidden");
и добавьте к форме другой ввод, «скрытый» с действиями, или добавьте к значению
идентификатор действия, например:
var oldvalue = $("#disa_num input").val();
$("#disa_num input").val("d-"+oldvalue); //prepend "d-" to identify it as "deleted"
Вот и все .. Я надеюсь, что это полезно.