Динамическое добавление значений в форму с помощью 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 для поиска имен пользователей. Эта функция работает отлично. Моим первым решением было добавить в форму кнопки с необходимыми значениями.

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

Я думаю, что самый простой способ сделать это - сохранить всю информацию о получателе в объекте или массиве 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 ...
}

Преимущество этого заключается в том, что вам не нужно беспокоиться об удалении нужных получателей из формы. Как только вы создаете форму, вы знаете, что отправляете только правильных получателей.

Answer 3

Для этого нужны были некоторые цитаты. Не знаю, будет ли это делать то, что вы хотите, хотя ... Также валь

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

И получатели, а не получатели ...