Want to copy selected items (by checkbox) in a jquery popup to the parent page

Question

I have a page that has a button, that when clicked opens up a jqueryui popup window.

the window has a list of items, each with a checkbox beside it.

i want the selected items to be passed to the parent page when they hit the 'add' button on the popup.

The items should send back the values selected, and inject that into a textbox.

Answer 1

Hi @Blankman,

As @Adam mentioned, the form exists on the page already so you can easily read the values of the checkboxes.

Here's some example code:

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

Please note that if you're using asp.net, the modal will be placed OUTSIDE of the <form> element which means you won't be able to access the controls.

There's an easy fix for that, simply append the modal to the form element like this:

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

Hope this helps.

Marko