使用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 ... 
} 

这样做的好处是，你不必担心从表单删除右边的收件人。一旦你建立表格，你知道你只提交正确的收件人。