Results 1 to 5 of 5

Thread: [RESOLVED] Process text field on image click

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2003
    Posts
    259

    Resolved [RESOLVED] Process text field on image click

    i have this form that works fine but now i have this jpg image next to one of my address text fields that i want to be able to click the image, before processing the form if the user decides to, and if there is text in the field then another window will open up to google maps.

    this is what i have with just the image there
    Code:
    <tr>
                  <!-- Row 3 Column 1 -->
                  <td><span class="style14">Address:</span><br />
                  <input name="address" type="text" id="address" value="" size="35" maxlength="120" />
                  <img src="images/garmin.jpg" width="24" height="24"></td>
                </tr>

    this is what i have in one of my reports that works great at opening another window with a google map.

    Code:
    <td><font size="1" face="Arial, Helvetica, sans-serif"><a href="http://maps.google.com/maps?f=q&hl=en&q=<? echo urlencode($address); ?>" target="_blank">map it</a></font></td>
    so i need to be able to take and combine the two but i cant figure out how to tell it to do with a click of the image.

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Process text field on image click

    You can put the image inside the link:
    Code:
    <a href="http://maps.google.com/maps?f=q&hl=en&q=<? echo urlencode($address); ?>" target="_blank"><img src="images/garmin.jpg" width="24" height="24" border="0"></a>
    Or were you looking for something fancier?...

  3. #3
    PowerPoster
    Join Date
    Sep 2003
    Location
    Edmonton, AB, Canada
    Posts
    2,629

    Re: Process text field on image click

    you would need to use JavaScript; PHP can't interact with the client. if you give the image an ID, you can add an onclick event:

    Code:
    <script type="text/javascript">
      document.getElementById("imageID").onclick = function(){
    
        // Get the address
        var address = document.getElementById("address").value;
    
        // Encode the address
        address = encodeURIComponent(address);
    
        // Construct a URL
        var url = "http://maps.google.com/maps?f=q&hl=en&q=" + address;
    
        // Open URL in new window
        window.open(url);
      };
    </script>
    edit: just saw Samba had posted; I assumed that when he said he wanted to combine the two, he actually wanted to make it instant -- so I opted for JavaScript.
    Like Archer? Check out some Sterling Archer quotes.

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Process text field on image click

    I think you're right and I oversimplified the question, kows.

    It's Saturday and it's hot.

  5. #5

    Thread Starter
    Hyperactive Member
    Join Date
    Jun 2003
    Posts
    259

    Re: Process text field on image click

    Kows,

    that worked great. thank you. for any one else who might be interested in what i did. i used Kows java script code as is and in my image link i just added the id like this

    Code:
    <img src="images/garmin.jpg" id="imageID" width="24" height="24"></td>

Posting Permissions

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



Click Here to Expand Forum to Full Width