使用JQuery/Javascript爲表單動態添加值

Question

我正在創建一個私人消息系統，以允許用戶在網站上下文（即，不是電子郵件）內相互通信。

我已經創建了這個函數來處理我所有的表單提交。我想在不修改此功能的情況下實現解決方案（理想情況下）。

$("form.reload").submit(function(){ 
    alert($(this).serialize()); /* Debugging */ 
    $.post($(this).attr("action"), 
     $(this).serialize() 
    ,function(data){ 
     if(data){ 
      $("#error").html(data); 
     }else{ 
      location.reload(); 
     }; 
    }); 
    return false; 
}); 

在我的表單中，我使用JQuery Autocomplete來查找用戶名。這個功能完美運作。我的第一個解決方案是在表單中添加具有必要值的按鈕。

select: function(event, ui) { 
    $("#message_to").append("<input type=\"button\" class=\"recipient\" name=\"recipients[]\" value=\"" + ui.item.label + "\" onclick=\"$(this).remove()\" />"); 
} 

<form method="post" action="/messages-create" class="reload"> 
<div id="message_to"></div> 
</form> 

由於某些原因收件人的值沒有發佈。

我的第二個解決辦法是添加到已在形式

select: function(event, ui) { 
    $("input[name=recipients[]").val = ui.item.label; /* Need to add to array, not replace! */ 

    $("#message_to").append("<input type=\"button\" class=\"recipient\" name=\"recipient\" value=\"" + ui.item.label + "\" onclick=\"$(this).remove(); /* Remove from recipients */\" />"); 
} 

<form method="post" action="/messages-create" class="reload"> 
<input type="hidden" name="recipients[]" value="" /> 
<div id="message_to"></div> 
</form> 

該工程確定存在後陣，但我一直無法工作，如何追加到recipients[]陣列只與更換新標籤。從這裏繼續，我還需要知道如何從數組中刪除這個值。

在此先感謝！

Answer 1

這是一個kludge，但在你的第一個例子中，它不會序列化，因爲它是一個按鈕。嘗試使用隱藏字段，不要給按鈕一個名字，以防萬一它決定在未來工作。

select: function(event, ui) { 
    $("#message_to").append("<span onclick=\"$(this).remove()\"><input type=\"hidden\" class=\"recipient\" name=\"recipients[]\" value=\"" + ui.item.label + "\" />" + 
    "<input type=\"button\" value=\"" + ui.item.label + "\" /></span>"); 
} 

Answer 2

這需要一些引號。不知道這是否會做你想做的，但... 此外，VAL

$("input[name=recipients[]]").val(ui.item.label); 

和收件人，不receipients ...

Answer 3

我認爲，最簡單的方式做到這一點會將所有的收件人信息保存到一個JavaScript對象或數組中，然後在你的提交函數中，只需運行一個函數來檢查這個對象是否存在，如果存在，就用接收者的標識信息寫出一系列隱藏的輸入在序列化表格之前並開始撥打post。

創建一個可訪問的位置中的目標變量（我使用的是爲了方便全球範圍內，但實用對象會更好）

recipients_dict = {}; // We could also use an array if we have a find function handy. 

在你:select功能改變你onclick事件並添加：

select: function(event, ui) { 
    $("#message_to").append("<input type=\"button\" class=\"recipient\" name=\"recipients[]\" value=\"" + ui.item.label + "\" onclick=\"remove_recipients(this)\" />"); 
    recipients_dict[ui.item.label] = ui.item.label; 
} 

然後創建兩個函數，一個用於從數組中刪除人員，另一個用於在提交之前創建表單元素。

function remove_recipients(btn) { 
    btn = $(btn); 
    name = btn.value; 
    if (typeof recipients_dict[name] !== 'undefined') { 
     delete recipients_dict[name]; 
    } 
    btn.remove(); 
} 

function add_recipients(frm) { 
    if (typeof recipients_dict === 'object') { 
     _recipient_inputs = ""; 
     for (var name in recipients_dict) { 
      _recipients_inputs += '<input type="hidden" name="recipients[]" value="' + name + '" />'; 
     } 
     $(frm).append(_recipients_inputs); 
    } 
} 

然後，你submit函數中，只是通過：

$("form.reload").submit(function(){ 
    add_recipients(this); 
    alert($(this).serialize()); /* Debugging */ 
    // ... snip ... 
} 

這樣做的好處是，你不必擔心從表單刪除右邊的收件人。一旦你建立表格，你知道你只提交正確的收件人。