passing of values through image link

Question

heels 0 Light Poster

18 Years Ago

Hi,

i would like to know if it is possible to pass values from one page to another through an image link? I've have tried to "echo" the values but it seems like the values are not passing into the other page. Any suggestions on how to do it?

regards,
heels

php web-design

3 Contributors
16 Replies
121 Views
8 Hours Discussion Span
Latest Post 18 Years Ago Latest Post by heels

Dani AI

Generated 9 Months Ago

The underlying issue was a server-vs-client timing problem: PHP runs on the server and produces the HTML the browser receives. Echoing a textbox value into an anchor before the user submits the form will always be empty. was right that a query string can carry values and was right that the form must actually be submitted — the stray <b> in the onclick broke the handler in your page and kept the submit from firing.

Practical fixes you can use now:

Make the image a real submit control (visually an image but semantically a submit). That keeps HTML simple and accessible:

<form action="Search.php" method="get">
  <input id="txtSearch" name="txtSearch" type="text">
  <button type="submit"><img src="magnifyingGlass.jpg" alt="Search"></button>
</form>

Or build the URL client-side and navigate there (useful if you want a plain anchor behaviour). Read the field, encode it, then redirect:

document.getElementById('go').addEventListener('click', function(){
  var q = document.getElementById('txtSearch').value || '';
  location.href = 'Search.php?txtSearch=' + encodeURIComponent(q);
});

Troubleshooting checklist: make sure the <form> sits inside <body>, the text input has a name, and there are no stray tags breaking attributes (as spotted). Use the browser DevTools network tab to confirm which request is sent and whether the query string contains your value. For search UIs, prefer GET (bookmarkable, cacheable); never put sensitive data in a URL.

Sanitize and escape on the server before using values in SQL or HTML. Example pattern:

$search = filter_input(INPUT_GET, 'txtSearch');
$clean = htmlspecialchars($search ?? '', ENT_QUOTES, 'UTF-8');

Helpful references: MDN on forms and buttons (form element, button element) and PHP documentation on input and output handling (filter_input, htmlspecialchars). For XSS/validation guidance see the OWASP XSS Cheat Sheet ().

All 16 Replies

Ole Raptor 19 Posting Whiz in Training

18 Years Ago

you can send it through the address

<a href="yourpage.php?info=imageinfo">

then on your other page you can grab the info using

$info = $_GET['info'];

this will grab whatever info your sending through the link from image.

somedude3488 228 Nearly a Posting Virtuoso

18 Years Ago

you use a form with either get or post method.

once the form is submitted you can access this data by using:

//This is used when form method is get
$var = $_GET['input_name'];

//This is used when form method is post
$var = $_POST['input_name'];

input_name is the name of the form element in which you are trying to get info from.

somedude3488 228 Nearly a Posting Virtuoso

18 Years Ago

post your code and I will make adjustments and tell you what i did.

somedude3488 228 Nearly a Posting Virtuoso

18 Years Ago

this should do it:

<form action="search.php" method="get">
	<input name="txtSearch" type="text" id="txtSearch" size="40" />
	<img src="magnifyingGlass.jpg" alt="Search" width="15" height="15" border="0" onclick="javascript:this.form.submit()" />
</form>

what i did was change the method of the form to get and added some javascript to make the form submit when the image is clicked (eliminating the link).

you couldn't of done this the way you had because the form must be submitted before you can access those values via $_GET or $_POST arrays.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

heels 0 Light Poster · Answer 1 · 2008-06-16T09:11:57+00:00

you can send it through the address
<a href="yourpage.php?info=imageinfo">
then on your other page you can grab the info using
$info = $_GET['info'];
this will grab whatever info your sending through the link from image.

Yeah, it works :). But i am trying to get the values from the textbox and pass it to another page. How can it be done? Sorry, i am very new to php. Thanks for your help.

heels 0 Light Poster · Answer 2 · 2008-06-16T09:43:47+00:00

you use a form with either get or post method.
once the form is submitted you can access this data by using:
//This is used when form method is get
$var = $_GET['input_name'];

//This is used when form method is post
$var = $_POST['input_name'];
input_name is the name of the form element in which you are trying to get info from.

yeah, tried that. but apparently still passing empty values. is it because you can't pass values through an image link?

heels 0 Light Poster · Answer 3 · 2008-06-16T09:52:52+00:00

post your code and I will make adjustments and tell you what i did.

thanks man,

here it is.

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?> ">

<input name="txtSearch" type="text" id="txtSearch" size="40" />

<a href="Search.php?txtSearch=<?php echo $txtSearch=$_POST['txtSearch'];?>"><img src="magnifyingGlass.jpg" alt="Search" name="Search" width="15" height="15" border="0" id="Search" /></a>

heels 0 Light Poster · Answer 4 · 2008-06-16T10:22:03+00:00

this should do it:
<form action="search.php" method="get">
	<input name="txtSearch" type="text" id="txtSearch" size="40" />
	<img src="magnifyingGlass.jpg" alt="Search" width="15" height="15" border="0" onclick="javascript:this.form.submit()" />
</form>
what i did was change the method of the form to get and added some javascript to make the form submit when the image is clicked (eliminating the link).
you couldn't of done this the way you had because the form must be submitted before you can access those values via $_GET or $_POST arrays.

oh, i see. but the image button now can't be clicked?! what is happening?
i'm so sorry for the trouble caused, thanks alot for your help man.

somedude3488 228 Nearly a Posting Virtuoso · Answer 5 · 2008-06-16T10:27:09+00:00

it should be able to. i put the onlick attribute there and that should invoke the submittion of the form upon the clicking of the image. no idea whats happening.

do you have the from online, if so post the url and I will look at this problem.

you could try replacing the image with this:

<input type="image" src="magnifyingGlass.jpg" width="15" height="15" border="0" />

i have never used it, but it might solve the problem.

heels 0 Light Poster · Answer 6 · 2008-06-16T10:31:32+00:00

it should be able to. i put the onlick attribute there and that should invoke the submittion of the form upon the clicking of the image. no idea whats happening.
do you have the from online, if so post the url and I will look at this problem.

hm, i do not have the online form cause it is running on my server.
well, this is my form codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Corporate Phone Book</title>
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
}
.style7 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style13 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small;}
.style17 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #0000FF; }
-->
</style></head>
<form method="get" action="Search.php">
<body>

<table width="119%" border="0" cellspacing="0" cellpadding="0">

  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <?php
//connecting to database
			include ("config.php");
			include ("opendb.php");
?>
  <tr>
    <td colspan="2"><span class="style1">Search function</span></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td height="69" colspan="2"><table width="894" height="82" border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td width="406" rowspan="2"><table width="100%" height="57" border="0" cellpadding="0" cellspacing="1">
          <tr>
            <td width="402" height="42"><table width="100%" height="56" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
              <tr>
                <td height="16" bgcolor="#CCCCCC" class="style13"><p>Search by first name ,last name and company name</p>                  </td>
              </tr>
              <tr>
                <td bgcolor="#F0F0F0">
                  <div align="left">
                    <input name="txtSearch" type="text" id="txtSearch" size="40" />
<img src="magnifyingGlass.jpg" alt="Search" width="15" height="15" border="0" onclick="javascript<b></b>:this.form.submit()" />

            </table></td>
			
            </tr>

Thanks alot once again.

somedude3488 228 Nearly a Posting Virtuoso · Answer 7 · 2008-06-16T10:33:44+00:00

why is there <b></b> tags in the onclick? that is the problem.

heels 0 Light Poster · Answer 8 · 2008-06-16T10:38:38+00:00

why is there <b></b> tags in the onclick? that is the problem.

haha, thanks dude, anyway the <b></b> doesn't affect anything.
changed it to

<input type="image" src="magnifyingGlass.jpg" width="15" height="15" border="0" alt="Search" onclick="javascript:this.form.submit()" />

now it is working perfectly fine.
THANKS ALOT. :)

somedude3488 228 Nearly a Posting Virtuoso · Answer 9 · 2008-06-16T10:41:17+00:00

you can get rid of the onclick="javascript:this.form.submit()" , its not needed anymore.

heels 0 Light Poster · Answer 10 · 2008-06-16T10:41:55+00:00

you can get rid of the onclick="javascript:this.form.submit()" , its not needed anymore.

why is that so?

somedude3488 228 Nearly a Posting Virtuoso · Answer 11 · 2008-06-16T10:43:59+00:00

because the javascript was need on the image itself because its not an submit element.

<input type="image" src="image.jpg" />

is the same as

<input type="submit" value="Submit" />

heels 0 Light Poster · Answer 12 · 2008-06-16T10:47:52+00:00

because the javascript was need on the image itself because its not an submit element.
<input type="image" src="image.jpg" />
is the same as
<input type="submit" value="Submit" />

Oh, i understand it now. Thanks alot for teaching me. :).

passing of values through image link

Dani AI

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers