Jquery popup pass selected checkbox values to Parent window not working

Question

Friends

Im writing a jsp that opens a pop-up window using jQuery that has checkboxs and a user can then select all checkbox values on a pop-up window and then on Submit , it gets displayed to the parent window, So far I am able to open up a pop-up on click that displays the list of checkboxes and Im struggling to send the checked checkbox values to the parent page , Please suggest

My code is

<form action= "" id ="overlay_form" method= "post" style="display:none">
        <h3>Select Language</h3> 
        <br /><br />
        <input type="checkbox" name="countryCheckbox[]" value="English" /> English  <br/>
        <input type="checkbox" name="countryCheckbox[]" value="French" /> French  <br/>
        <input type="checkbox" name="countryCheckbox[]" value="Norwagian" /> Norwagian  <br/>
        <input type="checkbox" name="countryCheckbox[]" value="Swedish" /> Swedish <br/>
        <input type="checkbox" name="countryCheckbox[]" value="Chinese" /> Chinese <br/>
        <br /><br />
        <div class="row-fluid grid-footer">
        <div class="span8"></div>
        <div class="span5">
        <input class="btn btn-primary btn-primary-secondary" type="submit" name="saveDepartmentBtn" id="saveOrg" value="Save" onclick="this.disabled='disabled'; document.getElementById('saveOrg').disabled='disable';this.form.submit(); ">
          </div>
          <div class="span1">
        <button  class="btn btn-secondary" type="button" cancel-action="/admin/role/list" ><spring:message code="common.cancel" /></button>
        </div>
        </div>
    </form>
<p id="text">
                Selected Languages are: 
            </p>

Now to send the checked checkboxes data to the parent my JQuery code is

$(document).ready(function(){
        $('#overlay_form').submit(function(){

                    $('input:checkbox:checked').each(function(){
                        window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");

                    });
                    parent.$.close();
                    return false;
        });             
    });

However Send the selected checkboxes data to the Parent window is not working Please advice

Answer 1

You're not actually creating a real window. It's an overlay. So it's not a popup, it's not a window, and thus there is no window.parent for what you're working in.

Instead you have a hidden div / form that gets shown and positioned overtop of your window. Since this is all done with CSS and Javascript, there is no parent to your form because it's in the same window as the rest of your markup.

I'm sure if you looked at the javascript console of your browser you'd see an error along the lines of window.parent is null / not an object .

There's the explanation. Here's the answer: remove window.parent and parent from your code. And since it's not a window, you're not closing a window, so your close is likely a fadeOut .

$(document).ready(function(){
    $('#overlay_form').submit(function(){

                $('input:checkbox:checked').each(function(){
                    $("#text").text($("#text").text() + $(this).val()+ " ,");

                });
                $('#overlay_form').fadeOut(500);

                return false;
    });             
});