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

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

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

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

使用JQuery / Javascript动态地向表单添加值

3 个答案: