javscript checkbox values from popup to parent not working:

Hi i have a following code in coldfusion which is driving me crazy:

in my page i have something like this:

<cfform method="post" action="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#" name="post_sell_offer" id="post_sell_offer">
<input name="sel_cat" class="tinyborder" type="button" value="Select Category" onclick="WinOpen('category_select.cfm?frm=post_sell_offer&txt=sel_cats','650','540');">
        <input type="button" name="remove_selected" value="Remove Selected" onclick="return removeSelected();" class="button"><br><br />
        <select id="sel_cats" name="sel_cats[]" size="5" multiple style="height: 100px; width: 250px;">
        </select>
</cfform>

Now on clicking category_select.cfm page opens! The code related to category_select.cfm is below!


<script language="javascript1.2">
function checkMaxSelection( chk , rtnForm , rtn )
{
	if (chk.checked )
	{ 
		var theForm = document.frmCats; var z = 0; var sel=0;
		var p = window.opener || parent;
		ddl = p.document.forms[rtnForm].elements[rtn];
		total = ddl.options.length;
		//loop through each element and count the checkbox that are checked
		while (theForm[z])
		{
			if (theForm[z].type == 'checkbox' && theForm[z].checked) { sel++; }
			z++;
		}
		//then see if it is less than the max selection allowed
		if (sel > 3 - total)
		{
			alert('More Categories selected than allowed');
			return false;
		}
	}
	return true;
}

function addSelected( rtnForm , rtn )
{
	var p = window.opener || parent;
	ddl = p.document.forms[rtnForm].elements[rtn];
	total = ddl.options.length;

		if (total >= 3 ) { alert("More Categories selected than allowed"); return false;}
		var theForm = document.frmCats; var z = 0;
	//loop through each element and if its a checkbox and cheked add to the parent's listBox
	while (theForm[z])
	{
		if ( theForm[z].type == 'checkbox' && theForm[z].checked )
		{
			//loop through listbox and add only if not found previously
			found = false;
			for(i=0; i < 3 - total; i++)
				if (ddl.options[i] != null)
					if (ddl.options[i].value == theForm[z].value) found = true;

			if ( !found )
			{
				ddl.options.length++;
				ddl.options[total].text = theForm[z].title;
				ddl.options[total].value = theForm[z].value;
				ddl.options[total].selected = true;
			}
			total = ddl.options.length;
		}
		z++;
	}
	return true;
}
</script>

Now in below we have the following
<cfset getSelectedValues = #tools.getCats(checkpost=val(url.catID))#>
<form method="post" action="mode.cfm?action=selloffer_showkeywordcats&catID=<cfoutput>#val(catID)#</cfoutput>" name="frmCats">
    <input type="hidden" name="txt" value="sel_cats">
	<input type="hidden" name="frm" value="post_sell_offer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <cfif getSelectedValues.recordcount>
      <cfoutput query="getSelectedValues">
      <tr>
        <td><input type="checkbox" name="chkcat[]" value="#catID#" onClick="return checkMaxSelection(this,'post_sell_offer','sel_cats');">&nbsp;&nbsp;#catName#</td>
      </tr>
      </cfoutput>
      <tr><td>&nbsp;</td></tr>
      <tr><td>
      <input type="submit" value="  Add Selected  " name="done" class="tinyborder">
		<input type="button" value="  Close Window  " onClick="window.close();" name="close" class="tinyborder">
      </td></tr>
      <script language="javascript">
	addSelected('post_sell_offer','sel_cats');
	</script>
    </form>

now my selected category items never get added in the parent Page!

Please guide me what i am doing wrong here!

Open in new window

LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

theremonCommented:
Hi there

you say that when you click the inputbox, the category_select.cfm page opens. That is normal since you have added: onclick="WinOpen('category_select.cfm?frm=post_sell_offer&txt=sel_cats','650','540');" to your inputbox.
What is the behavior that you expect if it isn't the current one?
Gurpreet Singh RandhawaCEOAuthor Commented:
I think you did nt read my question properly!

the popup opens and i can perform functions but when i click the checkbox and then click add selected, they did not get added to parent page while in my function above addselected it is doing it as such!
theremonCommented:
Hi again

yes, I didn't understand your initial question, that's why I asked for clarification.
I'll take a look now and let you know.
IT Pros Agree: AI and Machine Learning Key

We’d all like to think our company’s data is well protected, but when you ask IT professionals they admit the data probably is not as safe as it could be.

theremonCommented:
Ok, another question, hopefully not as 'silly' as my first one.
Your category_select.cfm page is set up in such a way that when you click the 'add' button, it submits the form to mode.cfm. You do have the javascript function in category_select.cfm and a call to it, but that occurs on page load and not when you click the button.
So, by the looks of it, upon clicking of the button, you get redirected to mode.cfm.
If you want to do both, you should do something like:

<form method="post" action="mode.cfm?action=selloffer_showkeywordcats&catID=#val(catID)#" name="frmCats" onsubmit="return addSelected('post_sell_offer','sel_cats');">
Gurpreet Singh RandhawaCEOAuthor Commented:
hmm! what we submit the data to the same page instead of going to mode.cfm page

in the meantime i try your solution!
theremonCommented:
Hi again

in order to call the javascript function properly, you must either do it before the form is submitted (like in my reply), submit the form via JavaScript too, or finally, not refresh the page at all and use an Ajax call in order to post the data to the processing script. Let me know if my solution above worked ok or if we need to investigate further.
Gurpreet Singh RandhawaCEOAuthor Commented:
i think ur solution did worked, but the categories does appear in parent window but not visible

here are some screenshots:


Untitled.png
Gurpreet Singh RandhawaCEOAuthor Commented:
we need furthur investigation as we are near the end but some things creating trouble!
theremonCommented:
Hi again

I was away and couldn't follow up on your comments yesterday. I'll take a look now and let you know.
Gurpreet Singh RandhawaCEOAuthor Commented:
yep! ok so should we move ahead in our conversation of this error
azadisaryevCommented:
[off-topic]

the question begs to be asked is: why, in year 2010, are you still using pop-up windows?
it's not that pretty much every modern browser blocks them by default, but there are much nicer alternatives like ui dialogs (floated divs)

Azadi
Gurpreet Singh RandhawaCEOAuthor Commented:
Hmm! Nice point Azadi But the Reason i am using is like i am noob in javascript and other thing is i am creating a subcategory selection based on the values selected in the popup window so i get this thing running up! then later it can be thuoght to be converted in a  UI

UI dialog u mean by!!!!!????????
azadisaryevCommented:
>> UI dialog u mean by!!!!!????????

like <cfwindow>.
or, better yet, jquery UI dialog (http://jqueryui.com/demos/dialog/)

Azadi
Gurpreet Singh RandhawaCEOAuthor Commented:
leaving cfwindow behind we can move ahead with popup now!!
azadisaryevCommented:
well, if you insist...

attached is an example based on your code.

there were couple of errors in your code which needed to be corrected:
- your js code for adding <option> to the select list was not working in all browsers;
- you forgot to add TITLE attribute to your checkboxes: js code uses TITLE values to create new <option>s in the select list;
- your " Add Selected " button has been changed from 'submit' type to 'button' type, and an onCLick() event has been added for it;
- a lot of js has been slightly re-written, and calls to the js functions are a bit different now, too.

one thing i am still not sure about is your reference to url.catID in <cfset getSelectedValues = tools.getCats(checkpost=val(url.catID))> - your main page DOES NOT pass any catID url var to the popup, so i do not know what this is about...

Azadi
<!--- category_select.cfm --->
<script type="text/javascript">
function checkMaxSelection(chk, theForm, rtnForm, rtn) {
	if (chk.checked) { 
		var z = 0;
		var sel=0;
		var p = window.opener || parent;
		var total = p.document.forms[rtnForm].elements[rtn].options.length;
		//loop through each element and count the checkbox that are checked
		while (theForm[z]) {
			if (theForm[z].type == 'checkbox' && theForm[z].checked) sel++;
			if (sel > 3 - total) {
				alert('More Categories selected than allowed');
				chk.checked = false; //un-select the checkbox
				return false;
			}
			z++;
		}
	}
	return true;
}

function addSelected(theForm, rtnForm, rtn) {
	var p = window.opener || parent;
	var ddl = p.document.forms[rtnForm].elements[rtn];
	var total = ddl.options.length;
	if (total >= 3) {alert("More Categories selected than allowed"); return false;}
	var z = 0;
	var found;
	//loop through each element and if its a checkbox and cheked add to the parent's listBox
	while (theForm[z]) {
		if (theForm[z].type == 'checkbox' && theForm[z].checked) {
			//loop through listbox and add only if not found previously
			found = false;
			for (var i=0; i < 3 - total; i++) {
				if (ddl.options[i] != null && ddl.options[i].value == theForm[z].value) found = true;
			}
			if (!found) {
				var option = p.document.createElement('option');
				option.setAttribute('value',theForm[z].value);
				option.setAttribute('selected','selected'); // pre-select added option
				option.appendChild(p.document.createTextNode(theForm[z].title));
				ddl.appendChild(option);
			}
			total = ddl.options.length;
		}
		z++;
	}
	return true;
}
</script>
<cfset getSelectedValues = tools.getCats(checkpost=val(url.catID))>
<form method="post" action="" name="frmCats" id="frmCats">
	<input type="hidden" name="txt" value="sel_cats">
	<input type="hidden" name="frm" value="post_sell_offer">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<cfif getSelectedValues.recordcount>
		<cfoutput query="getSelectedValues">
		<tr>
			<td><input type="checkbox" name="chkcat[]" title="#catName#" value="#catID#" onClick="checkMaxSelection(this,this.form,'post_sell_offer','sel_cats');">&nbsp;&nbsp;#catName#</td>
		</tr>
		</cfoutput>
		<tr><td>&nbsp;</td></tr>
		<tr><td>
		<input type="button" value="  Add Selected  " name="done" class="tinyborder" onClick="addSelected(this.form, 'post_sell_offer', 'sel_cats');">
		<input type="button" value="  Close Window  " onClick="window.close();" name="close" class="tinyborder">
		</td></tr>
	</cfif>
	</table>
</form>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.