homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
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



 
Msg#: 4232474 posted 6:47 pm on Nov 19, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 10:07 am on Nov 21, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 5:33 pm on Nov 21, 2010 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4232474 posted 6:59 pm on Nov 21, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 7:09 pm on Nov 21, 2010 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4232474 posted 7:36 pm on Nov 21, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 8:24 pm on Nov 21, 2010 (gmt 0)

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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4232474 posted 9:38 pm on Nov 21, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 10:15 pm on Nov 21, 2010 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4232474 posted 11:21 pm on Nov 21, 2010 (gmt 0)

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



 
Msg#: 4232474 posted 12:21 am on Nov 22, 2010 (gmt 0)

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

CaliforniaDesigner24



 
Msg#: 4232474 posted 12:26 am on Nov 22, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved