Jquery checked values from Popup to parent window gets disappers - jquery-ui

Question

Friends
The functionality is as below , when a user clicks on a button a pop-up page opens that contains the checkboxes and user upon selecting the values from checkboxes clicks on submit on popup and those values gets displayed to the Parent page. The problem Im facing is that when a user submits the popup values , the values gets disaapers on the parent page and the page gets reloaded ,
The code for the popup is
<a href="#" id="pop" >Select Language</a>
<br />
<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="Hindi" /> Hindi <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="Submit" 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">
The selected Languages are:
</p>
and the Jquery code is
$(document).ready(function(){
$('#saveOrg').click(function(){
if(!$("#saveOrg").hasClass("notTwice")) {
alert('Inside new 2');
$("#saveOrg").addClass("notTwice");
var arr = [];
alert('Inside 3');
$('input:checkbox:checked').each(function(){
$("#text").text($("#text").text() + $(this).val()+ " ,");
});
alert('Inside 5');
$('#overlay_form').fadeOut(500);
return false;
}
});
});
The checked value gets disappers after alert('Inside 5'); in above code .
And the final css part is
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 380px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
Please suggest workaround to retain the value selected from the popup.

Answer 1

You could place the values in a session id or sessionstorage (if you are using html5).