...

View Full Version : Posting (Form) value through image mapping



bearded
07-10-2004, 08:36 AM
I am novice javascipter. Can anybody help me with a small code? ..
I have a php script which needs a value to execute from a form on any means.
I have an image map on webpage. I want that when I click any linked part of the map it would take a specific value and post to a php script, with the help of "Form (action)" or with a "href.." code. But I don't want any submit button. The image itshelp should be a submit button.

Thanks.

JPM
07-10-2004, 08:43 AM
maybe you could launch the forms submit button in a onclick script like so:

document.myform.submit
I think that would work..

bearded
07-10-2004, 10:03 AM
As I have stated earlier that I am a beginner. Therefore, could you pl. give me a example code, in detail.

Vincent Puglia
07-11-2004, 05:04 PM
hi bearded,

I'm somewhat confused, but I'll try to answer your question anyway...

What JPM means is that each form object has its own built-in submit() method. So, by executing the command, document.formname.submit() [where formname is your form's actual name], the form gets submitted.

Now, I have used image maps rarely, but from what I recall each area can have its own onclick event handler. Which means that within the specific area you simply add something like:

...onclick="document.myForm.submit();">

The question I have, though, is:

If you are using an image map, I have to presume you would want each individual section to do something else. ( For example, if your map were a pic of the US, clicking on NY would bring up a layer extolling Brooklyn, while clicking on CA would show an image of the Terminator stomping on migrant laborers as they fall into the San Andreas Fault. :)

However, if you simply want the user to click 'anywhere' on the map to submit the form, why are you using a map in the first place instead of a simple image?

<a href="#" onclick="document.formname.submit()"><img src='somename.jpg'></a>

Vinny

bearded
07-12-2004, 03:04 AM
Dear Seniors,

Thanks for taking interest in my problem!

Here again, I am clarifying my problem, with example:


<form name="form" action="script.php" method="post"><br>

<input type="hidden" name="value_name">

<img src="/images/image.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="value_name" value="alpha">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="value_name" value="beta">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="value_name" value="gama">
</map>
</FORM>

I have the image (image.gif) which I am using as the imagemap. I want, when click any part (shape) of image it could send the pre-assigned value (like: alpha, beta, gama, ...) for the shape to the script (script.php). Name of the value is value_name which is required by the script. That is all.

Please suggest me the specific code. Thanks.

canadianjameson
07-12-2004, 03:59 AM
Hey. okay... i dont know if this works because i'm not at home and cant test it. Anyways, this is (i think) what the suggestions were. i bolded the parts of your code i changed. you can change HelloForm to whatever form name you want, just change it within each <a href="#" onclick="document.HelloForm.submit()"> so it works.



<form name="HelloForm" action="script.php" method="post"><br>

<input type="hidden" name="value_name">

<img src="/images/image.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="value_name" value="alpha"><a href="#" onclick="document.HelloForm.submit()">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="value_name" value="beta"><a href="#" onclick="document.HelloForm.submit()">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="value_name" value="gama"><a href="#" onclick="document.HelloForm.submit()">
</map>
</FORM>



if this doesnt work, atleast it's on the right track.

alternatively, i think maybe this'll work:



<form name="HelloForm" action="script.php" method="post"><br>

<input type="hidden" name="value_name">

<img src="/images/image.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="value_name" value="alpha" onclick="document.HelloForm.submit()">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="value_name" value="beta" onclick="document.HelloForm.submit()">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="value_name" value="gama" onclick="document.HelloForm.submit()">
</map>
</FORM>

Willy Duitt
07-12-2004, 05:08 AM
Or:



<script type="text/javascript">
//<![CDATA[
function chkArea(){ if(!document.getElementById){ return };
var element = document.getElementsByTagName('area');
for(var i=0; i<element.length; i++){
var area = element[i];
area.onclick = function(){
document.form.value_name.value = this.value;
document.form.submit();
}
}
} onload = chkArea;
//]]>
</script>
</head>

<body>
<form name="form" action="http://google.com" method="get"><br>
<input type="hidden" name="value_name">
<img src="/images/image.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="value_name" value="alpha">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="value_name" value="beta">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="value_name" value="gama">
</map>
</FORM>


.....Willy

bearded
07-12-2004, 12:08 PM
Sorry Sirs...!

These suggested scripts are not working....

Willy Duitt
07-12-2004, 05:43 PM
Sorry Sirs...!

These suggested scripts are not working....

I know mine works because I tested it with google as the action....
Unless of course you are using some antiquiated browser such as IE4, NS3 which does not support getElementById in which case nothing will happen because the function will return false......

.....Willy

jamescover
07-12-2004, 05:50 PM
I have a php script which needs a value to execute from a form on any means.

Did you mean or any means???

If so, why don't you just url encode the information using the href property, and grab it from there:


<area shape="poly" coords="223,258,181,193,196,176,264,212" href="script.php?name_value=alpha">

<area shape="poly" coords="267,206,198,171,202,151,280,152" href="script.php?name_value=beta">

<area shape="poly" coords="280,147,202,148,198,126,265,90" href="script.php?name_value=gamma">

It's the same functionality as passing form data using the get method.

-james

Vincent Puglia
07-12-2004, 06:14 PM
<html>
<head>
<script type="text/javascript" language="javascript">
function doit(oForm, val)
{
oForm.value_name.value = val;
oForm.submit()
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form name="theForm" action="script.php" method="post"><br>

<input type="hidden" name="value_name">

<img src="http://members.aol.com/grassblad/images/bnrGrass.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="value_name" value="alpha" href="javascript:doit( document.theForm, 'alpha')">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="value_name" value="beta" href="javascript:doit(document.theForm,'beta')">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="value_name" value="gama" href="javascript:doit(document.theForm, 'gama')">
</map>
</FORM>
</body>
</html>


Vinny

bearded
07-13-2004, 06:39 PM
NOT WORKING..! Pl. suggest any tested script.

Vincent Puglia
07-13-2004, 09:01 PM
Hi bearded,

The script was tested and works. Do you realize that the areas, as defined, do not take up the complete image? And therefore, you will only see something happening if you click within the specified areas -- lower right?

As I said before, if you want the entire image to be clickable -- get rid of the image map. If you need to use an image map that covers the entire image, define the areas to do so.

Vinny

Willy Duitt
07-13-2004, 09:07 PM
NOT WORKING..! Pl. suggest any tested script.

I already told you I tested my script and I'm sure Vinny's script works and I wouldn't doubt that canadianjameson's script works also. Obviously, you are not correctly implementing any of the suggestions. Post the codes you are curently working with and I'm sure someone could point out where you have gone wrong...

.....Willy

Edit: BTW, I posted my script just as I tested it. If you would have only taken that example and tried it without making any changes you would see that it works for yourself. :rolleyes:

bearded
07-16-2004, 03:31 AM
Dears Sirs,
I am obliged with your kind efforts.. but sorry to say that still I am not getting the solution. Here again I am stating and clarifying my problem, with code continued...
I am tying to use an image-map for a form submission. I don't want to use submit button but instead I want to use the part of imagemap. My form has to post with the "name of input" and "value of input", both. Here, "name of input" is fixed for every image-map-part, while "value of input" PREDEFINED and different for every Submit-button (i.e. image-map-part). It it because my php script needs both for executing the script.

Here, I am clarifying my problem, with example:


<form name="form" action="script.php" method="post"><br>


<img src="/images/image.gif" width="300" height="300" usemap="#imagemap" border="0">
<map name="imagemap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" name="fixed-name" value="alpha">
<area shape="poly" coords="267,206,198,171,202,151,280,152" name="fixed-name" value="beta">
<area shape="poly" coords="280,147,202,148,198,126,265,90" name="fixed-name" value="gama">
</map>
</FORM>

I have the image (image.gif) which I am using as the imagemap. I want, when click any part (shape) of image it could send the pre-assigned value (like: alpha, beta, gama, ...) for the shape to the script (script.php). Name is "fixed-name" which is also required by the script. That is all.

Please suggest me the specific code.

Vincent Puglia
07-16-2004, 04:10 AM
Hi bearded,

Please post a link to the page in question

Vinny

jamescover
07-16-2004, 04:45 AM
I am tying to use an image-map for a form submission. I don't want to use submit button but instead I want to use the part of imagemap. My form has to post with the "name of input" and "value of input", both. Here, "name of input" is fixed for every image-map-part, while "value of input" PREDEFINED and different for every Submit-button (i.e. image-map-part). It it because my php script needs both for executing the script.




What was wrong with my solution posted above [PAGE 1], passing the vars as a string in the url?


<map name="mMap">
<area shape="poly" coords="223,258,181,193,196,176,264,212" href="http://www.ekigroup.com/dbdemo/getVars.php?name_value=alpha" />

<area shape="poly" coords="267,206,198,171,202,151,280,152" href="http://www.ekigroup.com/dbdemo/getVars.php?name_value=beta" />

<area shape="poly" coords="280,147,202,148,198,126,265,90" href="http://www.ekigroup.com/dbdemo/getVars.php?name_value=gamma" />
</map>

<img src="anyImage.jpg" width="450" height="250" usemap="#mMap">


Simple PHP script:


<?php
echo 'name_value = ' .$name_value;
?>


HTML output: name_value = alpha





-james

bearded
07-16-2004, 09:58 AM
Thanks jamescover ,
I have got the idea, and created my code with the help of your suggestions.

thanks again.
Bearded.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum