Хотите скопировать выбранные элементы (с помощью флажка) во всплывающем окне jquery на родительскую страницу

Question

У меня есть страница с кнопкой, при нажатии которой открывается всплывающее окно jqueryui.

в окне есть список элементов, каждый с флажком рядом с ним.

Я хочу, чтобы выбранные элементы передавались на родительскую страницу, когда они нажимали кнопку «Добавить» во всплывающем окне.

Элементы должны отправлять обратно выбранные значения и вставлять их в текстовое поле.

Answer 1

Как уже упоминалось в @Adam, форма уже существует на странице, поэтому вы можете легко прочитать значения флажков.

Вот пример кода:

HTML

<div id="some-form">
    <input type="checkbox" value="Option 1" />
    <input type="checkbox" value="Option 2" />
    <input type="checkbox" value="Option 3" />
</div>

JQuery

$("#some-form").dialog({
    height:300,
    modal: true,
    buttons: {
        'Insert Checkbox Values': function() {
            // The following loops through the checked checkboxes
            $("input[type=checkbox]:checked", this).each(function() {
               alert($(this).val());
               // write AJAX insert method here using $.ajax or $.post
            });
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

Пожалуйста, обратите внимание, что если вы используете asp.net, модальный будет помещен ВНЕ элемента <form>, что означает, что вы не сможете получить доступ к элементам управления.

Это легко исправить, просто добавьте модал к элементу формы следующим образом:

$("#some-form").parent().appendTo("form:first");

Надеюсь, это поможет.

Marko