passing checkbox values from a child form to a parent form on submit in javascript

[deepthiz]

I have the below code in a coldfusion parent form. ON click of a checkbox a child window (abc.cfm) opens which has for example 5 checkboxes related to the check box on the parent window.

<input type="checkbox" name="inq" id="inq" value="#item_code#" onClick="window.open('abc.cfm?inq=#item_code#');">#item_description#
<span class="style6">Click the checkbox for the list</span>

User checks 1 or more check boxes on the child window and hits submit ; the child page will close and The values selected need to be displayed on the parent.cfm page. Can anyone please let me know how to go about this. Im able to send the values in the textareas to the parent page. But I need the (ones that have been checked) category description to appear on the parent page.

This is on my parent cfm page.

[CODE]
<td colspan="2" class="trr3"><textarea cols="30" rows="5" name="narr"></textarea> </td>
<td width="32" valign="top" class="trr3">Brief</td>
<td width="499" valign="top" class="trr3"><input type="text" name="brief" size="30"></td>
[CODE]

Child page has the below code

[CODE]
<SCRIPT LANGUAGE="JavaScript">

function figure_this_out(){
var boxes = document.form1.cat;
var display = "";
var t = document.getElementById("category_id").value;
for (i = 0; i < boxes.length; i++){
if (boxes[i].checked == true){
display = display + boxes[i].value + ", ";
t = display;
//alert(t);
window.opener.document.getElementById("category_id").value=t;
window.opener.document.getElementById("narr").value = document.getElementById("narr").value;
window.opener.document.getElementById("brief").value = document.getElementById("brief").value;
}
}
window.close();
}
</script>

<table>
<cfloop query="nature_compl">
<cfif nature_compl.currentrow mod 3 EQ 1>
<tr>
</cfif>
<td class="trr3">

<input type="checkbox" id="cat" name="cat" value="#category_id#" onClick="if (this.checked) this.form.category_id.value=this.value; else this.form.category_id.value=''" >
#category_description#

</td>
</cfloop>

<input type="hidden" name="category_id" id="category_id" value="">
<tr>
</td>
</tr>
<tr>
<td class="trr3">
Brief &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="brief" size="38">
</td>
</tr>
<tr>
<td class="trr3">
Narrative
<textarea cols="30" rows="5" name="narr"></textarea>
</td>

</tr>
<tr>
<td><input type="button" class="groovybutton2" value="SUBMIT" name="save" onClick="figure_this_out();" >

</td>

<td colspan="3">&nbsp;</td>
</tr>
</table>

[CODE]

<SCRIPT LANGUAGE="JavaScript">

function figure_this_out(){
var boxes = document.form1.cat;
var display = "";
var t = document.getElementById("category_id").value;
for (i = 0; i < boxes.length; i++){
if (boxes[i].checked == true){
display = display + boxes[i].value + ", ";
t = display;
//alert(t);
window.opener.document.getElementById("category_id").value=t;
window.opener.document.getElementById("narr").value = document.getElementById("narr").value;
window.opener.document.getElementById("brief").value = document.getElementById("brief").value;
}
}
window.close();
}
</script>

<table>
<cfloop query="nature_compl">
<cfif nature_compl.currentrow mod 3 EQ 1>
<tr>
</cfif>
<td class="trr3">

<input type="checkbox" id="cat" name="cat" value="#category_id#" onClick="if (this.checked) this.form.category_id.value=this.value; else this.form.category_id.value=''" >
#category_description#

</td>
</cfloop>

<input type="hidden" name="category_id" id="category_id" value="">
<tr>
</td>
</tr>
<tr>
<td class="trr3">
Brief &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="brief" size="38">
</td>
</tr>
<tr>
<td class="trr3">
Narrative
<textarea cols="30" rows="5" name="narr"></textarea>
</td>

</tr>
<tr>
<td><input type="button" class="groovybutton2" value="SUBMIT" name="save" onClick="figure_this_out();" >

</td>

<td colspan="3">&nbsp;</td>
</tr>
</table>

[CODE]

Please direct me or kindly give an example thanks in advance!

[Old Pedant]

This code is nonsense:

...
    <input type="checkbox" id="cat" name="cat" value="#category_id#" onClick="if (this.checked) this.form.category_id.value=this.value; else this.form.category_id.value=''" >
#category_description#
    </td>
</cfloop>
<input type="hidden" name="category_id" id="category_id" value="">

That means that ONLY the *LAST* checkbox checked will have its value copied to the hidden form field. And if ANY checkbox is UN-checked, then the hidden form field value is erased.

Just plain silly. *GET RID* of that hidden form field. It is worthless.

*GET RID* of the onclick code for the checkboxes.

Then fix the code for figure_this_out. It was almost correct.

function figure_this_out()
{
    var boxes = document.form1.cat;
    var categories = "";
    for (i = 0; i < boxes.length; i++)
    {
        if (boxes[i].checked)
        {
             if ( categories != "" ) categories += ", ";
             categories += boxes[i].value;
        }
    }

    var doc = window.opener.document;
    doc.getElementById("category_id").value = categories;
    doc.getElementById("narr").value = document.getElementById("narr").value;
    doc.getElementById("brief").value = document.getElementById("brief").value;
    window.close();
}

[deepthiz]

thanks for your reply Old pendant!. I made the changes....im able to get the values in the textareas that is the brief and the narrative from child to parent page.

I want to retrieve the "category description" of the selected checkbox to appear on my parent page. since category description is not in any html element im not able to capture its value. Can you please give your input on this? thanks!

[Old Pedant]

Well, I don't use CF, but you should be able to do something like this:

<label>
    <input type="checkbox" id="cat" name="cat" value="#category_id#$$#category_description#"/>
    #category_description#
</label>

Now the code I gave you will end up putting something like:

7$$extended widgets, 11$$crenellated nuts

into the parent's "category_id" field. The number before each $$ is the #category_id# and the stuff after each $$ is the #category_description#. With a comma-space between each such pairing.

You could then process that (either in JavaScript or in CF back-end code) by splitting on the comma-space to get the id/description pairs. And then you can split each of those pairs on the $$ to get the individual ids and descriptions.

Will that work for you? If not, then describe *HOW* you want the data to appear in the parent <form>.

[deepthiz]

thanks again old pedant,

on the parent page.

There is no input field for the category description.....on the parent page...like there are textareas for brief and narrative which get populated from child page

I need it to be displayed as a checkbox which is checked and the description on the parent page.

for example 7$$extended widgets, 11$$crenellated nuts are the values from the child page....

on the parent page i want

checkbox(checked) Extended widgets
checkbox(checked) crenellated nuts


this is my parent page html code, the categoryId is retreived in a hidden element on parent page which is further used for processing. I wanted the cat description to be displayed like plain text. hope im clear

<input type="hidden" name="category_id" id="category_id" value="">

How do I capture the Category description? on the parent page....my question may be very dumb sorry if im ...actually ive been trying real hard to get this done....your help is greatly appreciated thanks!!



<tr>
<td colspan="4" class="trr3">&nbsp;</td>
</tr>

<tr>
<td colspan="4" class="trr3">Narrative</td>
</tr>
<tr>
<td colspan="2" class="trr3"><textarea cols="30" rows="5" name="narr"></textarea></td>
<td width="32" valign="top" class="trr3">Brief</td>
<td width="499" valign="top" class="trr3"><input type="text" name="brief" size="30"></td>
</tr>

[Old Pedant]

*WHERE* do you want the checked descriptions to appear on the parent page?

That's the part I don't see.

[deepthiz]

Above the Narrative! sorry i was not clear

[Old Pedant]

Oh, you mean here:

<td colspan="4" class="trr3">&nbsp;</td>

Okay, first of all, give an ID to that <td>:

<td id="catDescriptions" colspan="4" class="trr3">&nbsp;</td>

Then use my idea for the CF code for the checkboxes:

<input type="checkbox" id="cat" name="cat" value="#category_id#$$#category_description#"/>

And then simple mods to my original code:

function figure_this_out()
{
    var boxes = document.form1.cat;
    var categories = "";
    var descs = "";
    for (i = 0; i < boxes.length; i++)
    {
        if (boxes[i].checked)
        {
             var pair = boxes[i].value.split("$$"); 
             if ( categories != "" )
             {
                 categories += ", ";
                 descs += "<br/>"; // OR OTHER (see below)
             }
             categories += pair[0];
             descs += pair[1];
        }
    }

    var doc = window.opener.document;
    doc.getElementById("category_id").value = categories;
    doc.getElementById("catDescriptions").innerHTML = descs;
    doc.getElementById("narr").value = document.getElementById("narr").value;
    doc.getElementById("brief").value = document.getElementById("brief").value;
    window.close();
}

That assumed you want each category description on a separate line, so I used <br/> between each. If you want just a comma or something else between each, just change the </br/> as noted.

[deepthiz]

thanks! im getting undefined on the parent page instead of the cat descriptions!

the pair is not getting split actually....

when i alert the descs im getting undefined. on the child page

[Old Pedant]

Can you show me a live URL?

Failing that:
-- bring up the child page in your browser
-- click on the VIEW menu for your browser
-- click on the SOURCE or PAGE SOURCE menu item
-- copy/paste the HTML source *as seen by the browser* to here.
-- *PLEASE* wrap the code in [ code ] .... [ /code ] tags (omitting the spaces in the tags)

[deepthiz]

i made a silly mistake its working now!!! thanks a bunch for your time! atleast i can move ahead with work now thanks again