Get two click points on an image and send them to a php page

I want to click two points on an image and send them to php for processing the image.

This code I found will display an alert box with the position. Although the y ( vertical position ) is incorrect as both the x and Y are supposed to be from the top left corner of the image and the Y seems to be the distance from the bottom.

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div class="position">Hello</div><br/><br/>
<div >
  <div>
    <div>
      <a id="test">
  <img class="demo-box" src="smallVenice.jpg" />
      </a>
    </div>
    </div>

<script>
$(function() {
$("#test").click(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert(relativeX+':'+relativeY);
  $(".position").val("afaf");
});
});
</script>

Can somebody tell me how to get the two click points into an array? and how to pass them onto a php page.

You can send them as get parameters via the querystring.
Use $.ajax to make http requests without reloading the page.

var url = "process.php?x=" + relativeX + "&y=" + relativeY;
$.ajax(url).then(function(resp) {
  // successfully sent and got a response.
})

Can somebody tell me how to get the two click points into an array

No need for an array in this case but you can do this.

var position = [relativeX, relativeY];

Thanks for the reply but am off to bed now and will have to look at this tomorrow evening.

I may have not made myself clear about the two click points. The user will click on the image for the centre of a circle and then click on the image again for the edge of the circle. I wan to pass both points over to the php page at the same time so I do not have to reload the page.
I assume the first click will be saved somehow in the memory and when the image is clicked the second time they are then sent to the php page together.

Ah, in that case you can do something like this, once the array gets to 4 items it will submit the values and clear the array for the next four.

$(function() {
  var points = [];

  var submit = function(points) {
    $.ajax({
      url: 'process.php'
      method: 'POST',
      data: {
        points: points
      }
    })
  }

  $("#test").click(function(e) {
    var offset = $(this).offset();
    points.push(e.pageX - offset.left);
    points.push(e.pageY - offset.top);
    if (points.length == 4) {
      submit(points);
      points = [];
    }
  });

});

Thanks for the updated code Mark and it looks like it should do what I want.

I seem to have a couple of errors and I added a , after url: ‘process.php’ which cleared one but I can not find the other one which is to do with this line: $(function() {
The error is ‘$’ is undefined

I might have found something - is this jquery rather than JavaScript as I had stripped out the Jquery link?

Now I only get a HTML1300: Navigation occurred. error using the IE developers tool and nothing with the firefox web consol.

EDIT: I must have had the wrong setting on the Firefox web consol as I am now getting a Post message. So it looks like the java part is working but I can not see the result from the php page echo just a 200 OK message.

The echo is not working but an image creation is; I will have to have more of a play tomorrow night.

So it looks as though things are working and the problem was I had removed the jquery call and the missing ,

I have the code working now thank you @markbrown4

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.