Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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!
    Last edited by deepthiz; 09-19-2012 at 10:20 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    This code is nonsense:
    Code:
    ...
        <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.

    Code:
    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();
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Well, I don't use CF, but you should be able to do something like this:
    Code:
    <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:
    Code:
    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>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    *WHERE* do you want the checked descriptions to appear on the parent page?

    That's the part I don't see.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Above the Narrative! sorry i was not clear

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Oh, you mean here:
    Code:
    <td colspan="4" class="trr3">&nbsp;</td>
    Okay, first of all, give an ID to that <td>:
    Code:
    <td id="catDescriptions" colspan="4" class="trr3">&nbsp;</td>
    Then use my idea for the CF code for the checkboxes:
    Code:
    <input type="checkbox" id="cat" name="cat" value="#category_id#$$#category_description#"/>
    And then simple mods to my original code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by deepthiz; 09-20-2012 at 10:58 PM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    deepthiz (09-20-2012)

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i made a silly mistake its working now!!! thanks a bunch for your time! atleast i can move ahead with work now thanks again


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •