SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Populating Parent Window with data from clicks

    I am not very savvy with Javascript, but am pretty sure that what I am trying to do can be accomplished through Javascript.... I have a site that I am currently working on in Joomla, where the user will need to fill out information. In this area, I have a link to a picture that I have processed in Fireworks and made hotspots for each portion of the image. I currently have popups when the user mouseovers the different areas that show the hotspot's title. I need to make it so that the user can click one of these hot spots and that title of the hotspot be input into a field on the parent window. The user will be required to choose 4 choices from all of the hotspots on the image and each one of these need to be populated into the field of a form on the parent window; preferably separated by commas. Also, would prefer to make it so that the field can only be filled with 4 choices.

    Below is a sample of the code from the web page with the image that the user's will click.

    <body bgcolor="#ffffff">
    <img name="color_selection" src="color_selection.jpg" width="1000" height="510" border="0" id="color_selection" usemap="#m_color_selection" alt="" /><map name="m_color_selection" id="m_color_selection">
    <area shape="rect" coords="300,425,350,510" href="javascript:;" title="#106" alt="#106" />
    <area shape="rect" coords="250,425,300,510" href="javascript:;" title="#105" alt="#105" />

    Below is the code from the form on the parent window that I need to populate.

    <div id="myform">
    <fieldset>
    <legend>Questionnaire</legend>
    <form name="submit" id="submit" method="post" action="http://keesimps.com/index.php?option=com_forme&amp;fid=1&amp;Itemid=44" >
    <div>
    <div class="links">
    <a href="#nogo"><label>Color Combinations:<font class="required"> *</font></label>
    <span></span>
    </a>
    <input type="text" name="form[combination]" value="" id="combination" tabIndex="1" />
    </div>

    Is this something that would be too difficult for me to do myself? Will it have any limitations putting it into Joomla?

    Thanks,
    Keevin

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Due to PEBKAC I lost this message, so here's the short version.

    Return false from the function that handles the onclick event so that the default action for the link doesn't occur.
    Use the link href to contain a useful value for the field, but in such a way that it can still be usable when there's no javascript. A querystring value that the server might process works very well here.

    Code html4strict:
    <map name="m_color_selection" id="m_color_selection">
    	<area shape="rect" coords="300,425,350,510" href="?color=red" title="#106" alt="#106" />
    	<area shape="rect" coords="250,425,300,510" href="?color=green" title="#105" alt="#105" />
    </map>

    It may be tempting to assign an onclick function to each area element, like this:

    Code javascript:
    var map = document.getElementById('m_color_selection'),
        areas = map.areas,
        areasLen = areas.length,
        i;    
    for (i = 0; i < areasLen; i += 1) {
        areas[i].onclick = populateParentField;
    }

    But you can use only one onclick event on the map itself, then discover the source of that event later on.

    Code javascript:
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    	evt = evt || window.event;
    	targ = evt.target || window.srcElement;
    	// do stuff with targ.href
    	return false;
    }

    Now we just need to get the value from out of the href field, and send it to the parent window form, presumably into the field identified as combination.

    An easy way to get the colour is to split the value on the equals sign, and we can get to the parent document with top.document, resulting in a final script of the following:

    Code javascript:
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    	evt = evt || window.event;
    	var targ = evt.target || window.srcElement;
    	top.document.getElementById('combination').value = targ.href.split('=')[1];
    	return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Thank you so much for replying. Sorry, I haven't had a chance to test this until today.... I did everything as you said to the best of my abilities and when the area is clicked it does not populate the input area of the combination form in the parent window. You can see it in action here and click the small photo with a lot of colors below the text "Click the photo below to begin the process":

    Well, found out I can't post a link, so if you visit keesimps.com and go to the test menu on the top right, you will see what I'm talking about above.....

    I placed all of the code in the html page for the color selection tool. Do I need to place something in the parent page to receive it? Also, just want to note that I am running Joomla and the form that I am populating is a forms component.... But, if you view the source on the parent page that is the title of the form "combination" that I want to populate.

    Below is all of the code for the Color Selection page after modification. I did modify href="?color=red" to href="?color=###", where ### is the number of the bottle that I want to populate in the parent window.:

    <html>
    <head>
    <title>Color Selection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--Fireworks 8 Dreamweaver 8 target. Created Sun Jun 01 16:18:45 GMT-0700 ( ) 2008-->
    <script type="text/javascript">
    <!--
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || window.srcElement;
    top.document.getElementById('combination').value = targ.href.split('=')[1];
    return false;
    }
    -->
    </script>
    </head>
    <body bgcolor="#ffffff">
    <img name="color_selection" src="color_selection.jpg" width="1000" height="510" border="0" id="color_selection" usemap="#m_color_selection" alt="" /><map name="m_color_selection" id="m_color_selection">
    <area shape="rect" coords="300,425,350,510" href="?color=106" title="#106" alt="#106" />
    <area shape="rect" coords="250,425,300,510" href="?color=105" title="#105" alt="#105" />
    <area shape="rect" coords="200,425,250,510" href="?color=104" title="#104" alt="#104" />
    <area shape="rect" coords="150,425,200,510" href="?color=103" title="#103" alt="#103" />
    <area shape="rect" coords="100,425,150,510" href="?color=102" title="#102" alt="#102" />
    <area shape="rect" coords="50,425,100,510" href="?color=101" title="#101" alt="#101" />
    <area shape="rect" coords="0,425,50,510" href="?color=100" title="#100" alt="#100" />
    <area shape="rect" coords="950,340,1000,425" href="?color=99" title="#99" alt="#99" />
    <area shape="rect" coords="900,340,950,425" href="?color=98" title="#98" alt="#98" />
    <area shape="rect" coords="850,340,900,425" href="?color=97" title="#97" alt="#97" />
    <area shape="rect" coords="800,340,850,425" href="?color=96" title="#96" alt="#96" />
    <area shape="rect" coords="750,340,800,425" href="?color=95" title="#95" alt="#95" />
    <area shape="rect" coords="700,340,750,425" href="?color=94" title="#94" alt="#94" />
    <area shape="rect" coords="650,340,700,425" href="?color=93" title="#93" alt="#93" />
    <area shape="rect" coords="600,340,650,425" href="?color=92" title="#92" alt="#92" />
    <area shape="rect" coords="550,340,600,425" href="?color=91" title="#91" alt="#91" />
    <area shape="rect" coords="500,340,550,425" href="?color=90" title="#90" alt="#90" />
    <area shape="rect" coords="450,340,500,425" href="?color=89" title="#89" alt="#89" />
    <area shape="rect" coords="400,340,450,425" href="?color=88" title="#88" alt="#88" />
    <area shape="rect" coords="350,340,400,425" href="?color=87" title="#87" alt="#87" />
    <area shape="rect" coords="300,340,350,425" href="?color=86" title="#86" alt="#86" />
    <area shape="rect" coords="250,340,300,425" href="?color=85" title="#85" alt="#85" />
    <area shape="rect" coords="200,340,250,425" href="?color=84" title="#84" alt="#84" />
    <area shape="rect" coords="150,340,200,425" href="?color=83" title="#83" alt="#83" />
    <area shape="rect" coords="100,340,150,425" href="?color=82" title="#82" alt="#82" />
    <area shape="rect" coords="50,340,100,425" href="?color=81" title="#81" alt="#81" />
    <area shape="rect" coords="0,340,50,425" href="?color=80" title="#80" alt="#80" />
    <area shape="rect" coords="950,255,1000,340" href="?color=79" title="#79" alt="#79" />
    <area shape="rect" coords="900,255,950,340" href="?color=78" title="#78" alt="#78" />
    <area shape="rect" coords="850,255,900,340" href="?color=77" title="#77" alt="#77" />
    <area shape="rect" coords="800,255,850,340" href="?color=76" title="#76" alt="#76" />
    <area shape="rect" coords="750,255,800,340" href="?color=75" title="#75" alt="#75" />
    <area shape="rect" coords="700,255,750,340" href="?color=74" title="#74" alt="#74" />
    <area shape="rect" coords="650,255,700,340" href="?color=73" title="#73" alt="#73" />
    <area shape="rect" coords="600,255,650,340" href="?color=72" title="#72" alt="#72" />
    <area shape="rect" coords="550,255,600,340" href="?color=71" title="#71" alt="#71" />
    <area shape="rect" coords="500,255,550,340" href="?color=70" title="#70" alt="#70" />
    <area shape="rect" coords="450,255,500,340" href="?color=69" title="#69" alt="#69" />
    <area shape="rect" coords="400,255,450,340" href="?color=68" title="#68" alt="#68" />
    <area shape="rect" coords="350,255,400,340" href="?color=67" title="#67" alt="#67" />
    <area shape="rect" coords="300,255,350,340" href="?color=66" title="#66" alt="#66" />
    <area shape="rect" coords="250,255,300,340" href="?color=65" title="#65" alt="#65" />
    <area shape="rect" coords="200,255,250,340" href="?color=64" title="#64" alt="#64" />
    <area shape="rect" coords="150,255,200,340" href="?color=63" title="#63" alt="#63" />
    <area shape="rect" coords="100,255,150,340" href="?color=62" title="#62" alt="#62" />
    <area shape="rect" coords="50,255,100,340" href="?color=61" title="#61" alt="#61" />
    <area shape="rect" coords="0,255,50,340" href="?color=60" title="#60" alt="#60" />
    <area shape="rect" coords="950,170,1000,255" href="?color=59" title="#59" alt="#59" />
    <area shape="rect" coords="900,170,950,255" href="?color=58" title="#58" alt="#58" />
    <area shape="rect" coords="850,170,900,255" href="?color=57" title="#57" alt="#57" />
    <area shape="rect" coords="800,170,850,255" href="?color=56" title="#56" alt="#56" />
    <area shape="rect" coords="750,170,800,255" href="?color=55" title="#55" alt="#55" />
    <area shape="rect" coords="700,170,750,255" href="?color=54" title="#54" alt="#54" />
    <area shape="rect" coords="650,170,700,255" href="?color=53" title="#53" alt="#53" />
    <area shape="rect" coords="600,170,650,255" href="?color=52" title="#52" alt="#52" />
    <area shape="rect" coords="550,170,600,255" href="?color=51" title="#51" alt="#51" />
    <area shape="rect" coords="500,170,550,255" href="?color=50" title="#50" alt="#50" />
    <area shape="rect" coords="450,170,500,255" href="?color=49" title="#49" alt="#49" />
    <area shape="rect" coords="400,170,450,255" href="?color=48" title="#48" alt="#48" />
    <area shape="rect" coords="350,170,400,255" href="?color=47" title="#47" alt="#47" />
    <area shape="rect" coords="300,170,350,255" href="?color=46" title="#46" alt="#46" />
    <area shape="rect" coords="250,170,300,255" href="?color=45" title="#45" alt="#45" />
    <area shape="rect" coords="200,170,250,255" href="?color=44" title="#44" alt="#44" />
    <area shape="rect" coords="150,170,200,255" href="?color=43" title="#43" alt="#43" />
    <area shape="rect" coords="100,170,150,255" href="?color=42" title="#42" alt="#42" />
    <area shape="rect" coords="50,170,100,255" href="?color=41" title="#41" alt="#41" />
    <area shape="rect" coords="0,170,50,255" href="?color=40" title="#40" alt="#40" />
    <area shape="rect" coords="950,85,1000,170" href="?color=39" title="#39" alt="#39" />
    <area shape="rect" coords="900,85,950,170" href="?color=38" title="#38" alt="#38" />
    <area shape="rect" coords="850,85,900,170" href="?color=37" title="#37" alt="#37" />
    <area shape="rect" coords="800,85,850,170" href="?color=36" title="#36" alt="#36" />
    <area shape="rect" coords="750,85,800,170" href="?color=35" title="#35" alt="#35" />
    <area shape="rect" coords="700,85,750,170" href="?color=34" title="#34" alt="#34" />
    <area shape="rect" coords="650,85,700,170" href="?color=33" title="#33" alt="#33" />
    <area shape="rect" coords="600,85,650,170" href="?color=32" title="#32" alt="#32" />
    <area shape="rect" coords="550,85,600,170" href="?color=31" title="#31" alt="#31" />
    <area shape="rect" coords="500,85,550,170" href="?color=30" title="#30" alt="#30" />
    <area shape="rect" coords="450,85,500,170" href="?color=29" title="#29" alt="#29" />
    <area shape="rect" coords="400,85,450,170" href="?color=28" title="#28" alt="#28" />
    <area shape="rect" coords="350,85,400,170" href="?color=27" title="#27" alt="#27" />
    <area shape="rect" coords="300,85,350,170" href="?color=26" title="#26" alt="#26" />
    <area shape="rect" coords="250,85,300,170" href="?color=25" title="#25" alt="#25" />
    <area shape="rect" coords="200,85,250,170" href="?color=24" title="#24" alt="#24" />
    <area shape="rect" coords="150,85,200,170" href="?color=23" title="#23" alt="#23" />
    <area shape="rect" coords="100,85,150,170" href="?color=22" title="#22" alt="#22" />
    <area shape="rect" coords="50,85,100,170" href="?color=21" title="#21" alt="#21" />
    <area shape="rect" coords="0,85,50,170" href="?color=20" title="#20" alt="#20" />
    <area shape="rect" coords="950,0,1000,85" href="?color=19" title="#19" alt="#19" />
    <area shape="rect" coords="900,0,950,85" href="?color=18" title="#18" alt="#18" />
    <area shape="rect" coords="850,0,900,85" href="?color=17" title="#17" alt="#17" />
    <area shape="rect" coords="800,0,850,85" href="?color=16" title="#16" alt="#16" />
    <area shape="rect" coords="750,0,800,85" href="?color=15" title="#15" alt="#15" />
    <area shape="rect" coords="700,0,750,85" href="?color=14" title="#14" alt="#14" />
    <area shape="rect" coords="650,0,700,85" href="?color=13" title="#13" alt="#13" />
    <area shape="rect" coords="600,0,650,85" href="?color=12" title="#12" alt="#12" />
    <area shape="rect" coords="550,0,600,85" href="?color=11" title="#11" alt="#11" />
    <area shape="rect" coords="500,0,550,85" href="?color=10" title="#10" alt="#10" />
    <area shape="rect" coords="450,0,500,85" href="?color=09" title="#09" alt="#09" />
    <area shape="rect" coords="400,0,450,85" href="?color=08" title="#08" alt="#08" />
    <area shape="rect" coords="350,0,400,85" href="?color=07" title="#07" alt="#07" />
    <area shape="rect" coords="300,0,350,85" href="?color=06" title="#06" alt="#06" />
    <area shape="rect" coords="250,0,300,85" href="?color=05" title="#05" alt="#05" />
    <area shape="rect" coords="200,0,250,85" href="?color=04" title="#04" alt="#04" />
    <area shape="rect" coords="150,0,200,85" href="?color=03" title="#03" alt="#03" />
    <area shape="rect" coords="100,0,150,85" href="?color=02" title="#02" alt="#02" />
    <area shape="rect" coords="50,0,100,85" href="?color=01" title="#01" alt="#01" />
    <area shape="rect" coords="0,0,50,85" href="?color=00" title="#00" alt="#00" />
    </map>
    </body>
    </html>

    Please let me know if I did something retarded or there is a simple solution. Thanks again for your time and assistance.

    -Keevin-

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The script attaches an event to an element that's on the page.
    You're running the script from the head, from where there are no page elements to work with.

    Run the script from the end of the body, just before the </body> or if you must run it from the head use some technique to run the code after the page has loaded.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I placed the script just before the </body>.... Still not working; am I supposed to leave the <script> tag up in the head and just add the variable before the </body>? Here is what I have now -

    Up Top

    <html>
    <head>
    <title>Color Selection</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--Fireworks 8 Dreamweaver 8 target. Created Sun Jun 01 16:18:45 GMT-0700 ( ) 2008-->
    </head>
    <body bgcolor="#ffffff">


    Down Below

    </map>
    <script type="text/javascript">
    <!--
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || window.srcElement;
    top.document.getElementById('combination').value = targ.href.split('=')[1];
    return false;
    }
    -->
    </script>
    </body>
    </html>


    I looked at the errors I was receiving from the browser and this is what is showing up:

    Error: top.document.getElementById("combination") has no properties
    Source File: (Had to edit web address out)/images/services/color_selection.htm
    Line: 125

    After trying to select a bottle I get this error, with the number changing based on the selection:

    Error: top.document.getElementById("combination") has no properties
    Source File: (Had to edit web address out)/images/services/color_selection.htm?color=65
    Line: 125


    Should I enter the name of the element as form[combination], as it's titled on the parent page or have I placed things incorrectly?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let's break things down a but to try and troubleshoot this issue.

    Try this the the troubled line:

    Code javascript:
    var el = top.document.getElementById('combination');
    el.value = targ.href.split('=')[1];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let's break things down a but to try and troubleshoot this issue.

    Try this with the troubled line:

    Code javascript:
    var el = top.document.getElementById('combination');
    el.value = targ.href.split('=')[1];
    Last edited by paul_wilkins; Jun 23, 2008 at 17:07.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replaced line 25 with the code you entered, so it now looks like this:

    </map>
    <script language="javascript" type="text/javascript">
    <!--
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || window.srcElement;
    var el = top.document.getElementById('combination');
    el.value = targ.href.split('=')[1];
    return false;
    }
    -->
    </script>
    </body>
    </html>

    I get this error:

    Error: el has no properties
    Source File: (removed)/images/services/color_selection.htm?color=65
    Line: 126

    Would something like this modified to a click work? -

    opener.document.myforms.combination.value = document.?.value;

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Yes, now that I've worked out how to test this without xss issues occuring, using opener is a good way.

    Code javascript:
    opener.document.getElementById('combination').value = targ.href.split('=')[1];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I now have:

    </map>
    <script language="javascript" type="text/javascript">
    <!--
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
    evt = evt || window.event;
    var targ = evt.target || window.srcElement;
    opener.document.getElementById('combination').value = targ.href.split('=')[1];
    return false;
    }
    -->
    </script>
    </body>
    </html>

    The error I get:

    Error: uncaught exception: Permission denied to get property HTMLDocument.getElementById

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Are both pages in the same domain?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, on same domain/site. The user clicks an image to open the new window.... Like I said I am running joomla and the forms that I am using is a component/module, but the code that I pulled from the original post is from the source of the parent window. Can you go to the site and see what I'm talking about? keesimps.com, click on Test on top menu and an image halfway down the page with a lot of colors.....

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    A likely solution is to create a function on the main window that will receive the value and populate the form, and pass the value from the child to the main.

    Code javascript:
    function setCombination(text) {
        document.getElementById('combination').value = text;
    }

    Code javascript:
    var map = document.getElementById('m_color_selection').onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || window.srcElement;
        var value = targ.href.split('=')[1];
        opener.setCombination(value);
        return false;
    }

    It does seem plausable that the brower won't allow one window to directly affect another, except through functions that have already been defined.

    Failing that though, I'm at a loss. Some resources that may help you though are:
    http://www.planet-source-code.com/vb...=5978&lngWId=2
    http://chiragrdarji.wordpress.com/20...in-javascript/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, I keep getting the same error:

    Error: uncaught exception: Permission denied to get property HTMLDocument.getElementById

    Maybe it won't allow this to happen; I'll look at the sites you posted. I think it may be a joomla thing because I have to add the code in the backend for the text body and am not exactly sure if that's treated almost like an iframe or what....

    Thanks again for all of your time and assistance; I really appreciate it. If I can get it figured out, I'll let you know.


Bookmarks

Posting Permissions

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