Member Avatar for statsProf

I have the following problem passing coordinate data from a web page to a php handler that will read and write the data to a storage file or a database. What I am asking the user to do is click on a line (a png image) which has attributed coordinates x,y. I am using the following code to present the image:

<form action='CS4L03_Hndlr.php' method='get'>
<input type='image' name='shapes_image' src='10cmLine.png' style='border: none;'/>
</form>
When the participant clicks on the image, the x and y values are sent in the url as shown below.

http:/../CS4L03_Hndlr.php?shapes_image.x=440&shapes_image.y=21

However, when I try to read the data using the file handler program CS4L03_Hndlr.php no data are passed.

This is the code for the handler program:

$linex = $_GET['shapes_image.x'];
$liney = $_GET['shapes_image.y'];

All suggestions appreciated. Cheers.

  • 2 Contributors
  • 3 Replies
  • 211 Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by statsProf

Dani AI

Generated

Quick explanation and a couple of practical options.

As pointed out, browsers send image-button coordinates as name.x and name.y, but PHP normalizes those dotted names into underscores when it builds the superglobals. That is why your attempt to read $_GET['shapes_image.x'] returned nothing — the values arrived under names with underscores. For a robust solution, it helps to either read those underscore keys on the server or avoid the input-image quirk entirely and send coordinates you control.

If you want pixel-accurate coordinates that compensate for CSS resizing (recommended), capture the click in JavaScript, convert to the image’s natural pixel space, put the values into hidden fields, and submit. Example pattern:

<form id="coordsForm" action="/CS4L03_Hndlr.php" method="post">
  <input type="hidden" id="xField" name="clickX">
  <input type="hidden" id="yField" name="clickY">
  <img id="lineImg" src="10cmLine.png" alt="">
</form>

<script>
var img = document.getElementById('lineImg');
img.addEventListener('click', function(e){
  var r = img.getBoundingClientRect();
  var x = Math.round((e.clientX - r.left) * img.naturalWidth / r.width);
  var y = Math.round((e.clientY - r.top) * img.naturalHeight / r.height);
  document.getElementById('xField').value = x;
  document.getElementById('yField').value = y;
  document.getElementById('coordsForm').submit();
});
</script>

On the server always validate and sanitize the inputs (cast to integers, check bounds against the image dimensions, log unexpected values). Troubleshooting tips: dump the incoming array (var_dump($_GET) / var_dump($_POST)), inspect the browser’s network/query string, and enable error_reporting during development. Glad you got it working, — ’s pointer to the underscore behavior is the core reason.

Recommended Answers

All 3 Replies

Member Avatar for edwinhermann

The dots get changed to underscores. So use this instead:

$linex = $_GET['shapes_image_x'];
$liney = $_GET['shapes_image_y'];
Member Avatar for statsProf

Bold Text HereFABULOUS!
Thank-you so much for your rapid response. This will really help our work.
Cheers.

Member Avatar for statsProf

The question has been resolved ... thanks for your help.

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.