Using mapped image to fill a text box in a form

Question

I'm new to php and javascript. I'm working on a form that have 3 sets of checkbox and a text box. When a user clicks on the checkbox a popup window of mapped image comes out. The image is a map. When the user clicks on a certain city, the text box get's filled with whatever city the user clicks and then closes. So far, this is the part that I get stucked. I can make it work when the map and the form are on the same page using the code below that I found online:

<AREA SHAPE='POLY' 
COORDS="340, 675, 340, 676, 335, 694, 339, 698, 348, 709, 332, 737, 334, 737, 336, 749," 
HREF="javascript:void(0);" onClick="document.forms['Form1'].Field1.value ='Honolulu'; return false;">

.....but I'm having problem when these two are on a different page. The solution that I could think of is using javascript variable and send it to the form from the image map. Sounds possible but couldn't figure out how to pass the same variable to the different page.

Is there any other way to do this?

Thanks in advance!

score 0 · Answer 1 · edited May 23 '17 at 11:55

0

To pass a variable from one page to another, since you're already using a form, you can use the GET form method to pass variables between pages. Using a hidden input element perhaps:

HTML:

<form method="get" action="nextpage.htm">
    <map name="country">
    <area shape='poly' coords="340, 675, 340, 676, 
        335, 694, 339, 698, 348, 709, 332, 737, 334, 
        737, 336, 749," href="#" id="Honolulu" />
    </map>
    <input type="hidden" value="" name="selected" id="selected" />
</form>

Javascript:

var hidden = document.getElementById('selected');
var area = document.getElementsByTagName('area');

for (var i = 0; i < area.length; i++) {
    area[i].onclick = function() {
        hidden.value = this.id.charAt(0).toUpperCase() + this.id.slice(1);
        return false;
    }
}

This code will use the area element's id to fill in the hidden input element, while capitalizing it (since HTML is case insensitive). Have a look at this question's answers for how to get back the information on the next page: Parse query string in JavaScript

Failing that, you can always use cookies.

edited May 23 '17 at 11:55

Community

1
1

answered Sep 25 '10 at 01:14

Yi Jiang

46,385
16
133
131

Thanks for your reply. This works, but it opens a new window. Just to make it clear, I need to send the variable to the previous window not the next window. Also, I should be able to do it multiple times. What i'm trying to do is similar to a popup calendar, but instead of a calendar a mapped image appears and is used to fill the field in the form. I'm actually beginning to realize that either this is impossible or I'm in way over my head. lol. Thanks. – eggman20 Oct 01 '10 at 02:43
@eggman You can, conceivably using ajax for the page to pass the info to the server *then* passing it back to the other page, but that is really a lot of trouble for this. Maybe you might want to consider reworking the architecture of this form to not have to do this? – Yi Jiang Oct 01 '10 at 03:39
Yeah, I figure it's too much for newbie like me. I'll try to do some work around on this...anyway Thanks for your help though. I appreciate... – eggman20 Oct 01 '10 at 10:33

Using mapped image to fill a text box in a form

1 Answers1