Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Posting (Form) value through image mapping

    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.

  • #2
    JPM
    JPM is offline
    Regular Coder
    Join Date
    Mar 2004
    Location
    Norway
    Posts
    204
    Thanks
    0
    Thanked 0 Times in 0 Posts
    maybe you could launch the forms submit button in a onclick script like so:
    Code:
    document.myform.submit
    I think that would work..
    <JPM />

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As I have stated earlier that I am a beginner. Therefore, could you pl. give me a example code, in detail.

  • #4
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    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
    Where the world once stood
    the blades of grass
    cut me still

  • #5
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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:

    Code:
    <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>
    Last edited by canadianjameson; 07-12-2004 at 05:08 AM. Reason: oops
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or:

    Code:
    <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

  • #8
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry Sirs...!

    These suggested scripts are not working....

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bearded
    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

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by jamescover; 07-13-2004 at 11:20 PM.
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #11
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript" language="javascript">
    function 
    doit(oFormval)
    {
       
    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
    Where the world once stood
    the blades of grass
    cut me still

  • #12
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    NOT WORKING..! Pl. suggest any tested script.

  • #13
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    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
    Where the world once stood
    the blades of grass
    cut me still

  • #14
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bearded
    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.
    Last edited by Willy Duitt; 07-13-2004 at 10:10 PM.

  • #15
    New Coder
    Join Date
    Sep 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fresh example..

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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