獲取由Ajax，動態輸入字段和靜態輸入字段加載的表單輸入字段的值

Question

這有點複雜，所以我希望我說出這個權利。

我有一個加載選項列表，並用一個靜態的輸入開始的一種形式：

<span id="keyword_list_out" class="input"><input class="keys margin-bottom" type="text" name="keywords[]" /> 

當頁面加載屬於列表，如Ajax調用顯示其他輸入字段：

<span class="field-wrapper"><input class="keys" type="text" name="keywords[]" value="Option One" /><a class="remove-keyword" href="javascript:void(0);"><img src="images/icons/cross-button-icon.png" /></a></span> 
<span class="field-wrapper"><input class="keys" type="text" name="keywords[]" value="Option Two" /><a class="remove-keyword" href="javascript:void(0);"><img src="images/icons/cross-button-icon.png" /></a></span> 

這些選項被預置在第一個靜態輸入字段ID：keyword_list_out的頂部。

用戶可以動態地添加更多的輸入字段，他們可以刪除現有的字段。

到目前爲止，所有這些工作都很好。我的問題是訪問輸入字段中包含的數據。我需要能夠執行三種功能，一旦提交表單：

1. 如果用戶已刪除的選項，我需要如果用戶添加一個字段我需要插入從數據庫
2. 刪除此這個到數據庫
3. 如果用戶改變現有字段的我需要在數據庫中更新此值

我可以通過使用輸入名稱「KEYWORD_NAME []」訪問輸入字段內的數據作爲一個數組，然後我可以遍歷數組。

但是，這並沒有解決具有特定ID號的現有選項。我可以將ID編號分配給從Ajax調用加載的字段，但靜態字段和用戶添加的字段不會有ID編號，因爲這些不是必需的。這些字段將被簡單地插入到數據庫中。

所以我想我的問題是我將如何去確定哪個現有選項屬於數據庫中的什麼ID號。我應該補充一點，這些選項並不是唯一命名的。

我考慮一些諸如：

1. 只爲Ajax加載字段
2. 當通過每個輸入提交循環和使用定界符用戶預先設置ID到名稱值的末尾提供的ID號不會提供。 IE：選項二--- 1
3. 使用PHP循環訪問數組並在數組中匹配的數組值爆炸---''
4. 如果在'---'上找到匹配項，則更新數據庫，否則插入到數據庫中

有什麼想法？

UPDATE

我已劃分輸入字段成兩個陣列：existing_options []和new_options []。發佈我添加了一些之前

在我的jQuery腳本：

var existing_options = $('input[name=existing_options]').attr('value'); 
var new_options = $('input[name=new_options]').attr('value'); 

發送Ajax的數據是：

'existing_options[]=' + existing_options + '&new_options[]=' + new_options; 

但是PHP正在恢復，這些值是字符串，不是數組。在這裏丟失的東西....

Answer 1

我會建議在數據庫端使用自動增量ID。當加載頁面，已刪除時使用的ID放在像這樣<span class="field-wrapper" id="$row[id]">比：

$('.remove-keyword').on('click', function(){ 
    var id = $(this).parents('span').attr('id'); 
    place ajax post here with data sent being this id. 
}); 

，基本上這將是相同的添加關鍵字，除了使用AJAX張貼到你的腳本，並使用mysql_insert_id();作爲返回的id而不是動態創建下一行。

Answer 2

當字段通過AJAX加載它們分配的ID

<input class="keys" type="text" id="keyword_11" name="keywords[]" value="Option Two" /> 
<input class="keys" type="text" id="keyword_12" name="keywords[]" value="Option Two" /> 

上提交點擊然後在jQuery中，你可以通過關鍵字迴路

var new_keywords=Array(); 
var existing_keywords=Array(); 
$("input[name^='keywords']").each(function(){ 
    var id = $(this).attr("id"); 
    var val=$(this).val(); 
    if(id=="" && val!="") 
    { 
    new_keywords.push($(this).val()); 
    } 
    else if(id!="") 
    { 
    var keyword_id=id.split("_")[1]; 
    existing_keywords.push({"id":keyword_id,"val":val}); 
    } 
}); 

// call AjAX function add new_keywords to database 
// call Ajax function to update existing keywords 

更新1

在向數據庫添加new_keywords的成功功能通過AJAX更新現有的dom，這樣如果添加新的關鍵字，那麼您可以編輯它並嘗試保存它將具有與其關聯的ID。