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

这有点杂乱无章，但在您的第一个示例中，它不会序列化，因为它是一个按钮。尝试使用隐藏字段并且不要给按钮命名，以防它决定在未来工作..

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);

还有收件人，而不是收件人...

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

这样做的好处是您不必担心从表单中删除正确的收件人。构建表单后，您就知道您只是提交了正确的收件人。