How Do You Make Multiple Image Map Areas Work As Form Submit Buttons?

How To Make Multiple Image Map Areas Submit Buttons On Form

[CaliforniaDesigner24]

Thank you in advance for your help! I've been trying to do this for over 12 hours without much luck at all... Please help me figure this VERY SIMPLE little thing out, the current code is sooooooo close to working perfectly and I feel like such a fool, and really have to finish this today somehow!

I have a map of the world, with an image map of every single country, and all I want to happen is: IF a user clicks on a country (for example, "USA") THEN an email is sent to me which says "Country: USA" and the user is redirected to a page that says "Thank You"

My "Image Map Form" is working 100% perfectly, except that the email I receive has the subject line, but NO CONTENT! How can I make it send me the Country Name?


These codes ARE both working in the "area" attributes to successfully SUBMIT the form:

href="javascript:document.WorldMapForm.submit();"

onClick="WorldMapForm.submit();"


These codes AREN'T specifying the Country Name in the EMAIL the above codes send out:

onMouseover="document.forms['WorldMapForm'].Country.value='CANADA';"

id=Country name=Country value=CANADA


I think my mistake may be that I'm specifying the hidden input field incorrectly, but here's how it's specified in the form, right above the image map:

<input type="hidden" name="Country" id="Country" runat="server">

PLEAAAAAASE HELP IF YOU CAN :)

[jackherbert]

Maybe you need to add an empty value in your hidden input field:

<input type="hidden" name="Country" value="">

[edited by: jackherbert at 10:10 am (utc) on Nov 21, 2010]

[CaliforniaDesigner24]

Thank you SO much for your help jackherbert! But it's still sending me a blank email... with the correct subject line though... any ideas? Or maybe if you know your an easy way that works, maybe could you post a sample <AREA></AREA> code to use for the the first (CANADA) hotspot in the code above? Thanks again for all your help!

[tedster]

It sounds like the problem may be in the server-side script that generates the email, and not in the HTML on the client-side.

[CaliforniaDesigner24]

hi tedster, thank you so much for your help! The server-side script is at www.1822clothing.com/securerelay.php (by Tectile FormMail). I've used it on about a dozen websites for various forms, and it always works perfectly even when I introduce new form fields and options without specifying them in the PHP file (the only thing I've ever had to change in that script is the email address each form gets sent to)

HOWEVER, I've never tried using it on an image map before, and it IS successfully sending the email but without any content expect the correct custom subject line... Any ideas? your time and advice is REALLY appreciated! THANK YOU SO MUCH

If you have another server-side script you could recommend, I'd gladly try it out! THANKS AGAIN !

[tedster]

Let's back up a bit. Is there actually a <form> element in your HTML? and does the page validate - W3C Validator - HTML [validator.w3.org]

[CaliforniaDesigner24]

Yes, there's definitely <form> element, and I'm a designer not really a programmer, so I'm not sure about validation. I know that it can have required fields and check if an email address is real, if needed...

Here is the code so you can see exactly how its set up (since it does send an email with a custom subject & redirect to a thank you page - I just need the email to have content like "Country: Canada" :

<!-- START OF IMAGE MAP FORM-->

<FORM method="post" action="securerelay.php" name="WorldMapForm">

<input type="hidden" name="recipients" value="usernamejetSetwebsite.com" />
<input type="hidden" name="mail_options" value="Exclude=email;realname;your_good_url,KeepLines" />
<input type="hidden" name="subject" value="New Country Clicked On Site" />
<input type="hidden" name="good_url" value="http://www.website.com/thankyou.html" />

<input type="hidden" name="Country" id="Country" runat="server">

<img src="images/huge_world_map.jpg" alt="world map" id="world_map" name="world_map" style="border-style:none; align:center fixed;" usemap="#world_image_map">

<br><br>

<map id="world_image_map" name="world_image_map">

<area shape=poly alt=Canada id=Canada name=Canada value=Canada onmouseover="this.style.cursor='crosshair'"
onclick="document.WorldMapForm.submit();" onClick="document.forms['WorldMapForm'].Country.value= 'Canada';" coords="182,94,217,59,306,39,343,45,373,42,415,28,402,21,425,
17,490,9,486,16,449,29,423,45,443,56,451,68,429,93,456,150,436,149,422,
149,414,159,392,173,391,158,389,148,369,162,330,178,317,155,290,143,191,
146,175,144,182,135,189,132,187,125,196,103,189,102,182,100" title="Canada">

</map>

</FORM>

<!-- END OF IMAGE MAP FORM-->


THANK YOU AGAIN, SO MUCH FOR YOUR HELP!

[edited by: tedster at 9:32 pm (utc) on Nov 21, 2010]
[edit reason] added line breaks to prevent side scrolling [/edit]

[tedster]

I am not strong in JavaScript, but I think that's where the problem lies - trying to fire TWO onclick actions from one click. I'd suggest that the answer may be in having one JS function that combines both actions into one function.

[CaliforniaDesigner24]

Yeah, I'm not very strong in JavaScript either.. at all actually :)

but I did combine the 2 functions into 1 (unfortunately the same issue occured - email sent, subject line correct, page redirected, but content of email is blank) ... Here's the combo:

onclick="document.WorldMapForm.submit(); document.forms['WorldMapForm'].Country.value= 'Canada';"

Have you been able to ever make this type of Image Map Form work, for your own projects? HOW?! :)

Thank you again, SO MUCH, for your time tedster!

[birdbrain]

Hi there CaliforniaDesigner24,

you are submitting the form before you have set the input value. ;)
It should be...

onclick="document.forms['WorldMapForm'].Country.value= 'Canada';document.WorldMapForm.submit()"

birdbrain

[CaliforniaDesigner24]

Thank you SO much birdbrain ;) you just saved this entire project

[CaliforniaDesigner24]

ALAS! A user named "birdbrain" on WebmasterWorld.com delivered the FAST, SIMPLE & EASY solution to the original question:

you are submitting the form before you have set the input value. ;)
It should be...

onclick="document.forms['WorldMapForm'].Country.value= 'Canada';document.WorldMapForm.submit()"

Thank you to all who have helped find the answer to this question, that after a week of research, it seems dozens if not thousands of people are looking for.