Member Avatar for mehmedean

hi,

I use an image button to post a form. Let's say the button is on A.php and form target is B.php. when clicked, B.php comes but with extra arguments in the url. As far as I understand they are the coordinates of the point I clicked on the button image.

<input name="image" type="image" class="search_button_big" title="Search" value=" " src="img/dot.png" />
....B.php?image.x=38&image.y=24&image=+

When I remove name property additional arguments in the url simplifies as follows:
<input type="image" class="search_button_big" title="Search" value=" " src="img/dot.png" />
...B.php?x=78&y=31

How can I prevent these x and y's?

Edited by mehmedean because: n/a
  • 2 Contributors
  • 3 Replies
  • 410 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by mehmedean

Dani AI

Generated

Brief explanation: an HTML image-button (an element of type image) is defined to submit the mouse click coordinates along with the form. If the control has a name the browser sends name.x and name.y; if it has no name it sends x and y. That behavior is why saw image.x/image.y (named) or x/y (unnamed) on the GET query string.

Practical ways to stop those coordinates while keeping GET:

  • Replace the image-input with a regular submit control that looks like an image. A <button> containing an <img> does not produce .x/.y parameters:

    <button type="submit" name="action" value="search">
  <img src="/img/dot.png" alt="Search">
</button>

  • Use a plain submit and style it with CSS so it appears as an image (no coordinates sent):

    <input type="submit" name="search" value="Search"
       style="background:url('/img/dot.png') no-repeat; width:24px; height:24px; border:none; text-indent:-9999px;">

JavaScript option (keeps original image element if desired): intercept the click, prevent the default binary coordinates from being sent, add any needed hidden field, then call form.submit() programmatically. Programmatic submission does not include the image .x/.y fields:

document.getElementById('imgBtn').addEventListener('click', function(e){
  e.preventDefault();
  var h = document.createElement('input');
  h.type = 'hidden'; h.name = 'action'; h.value = 'search';
  this.form.appendChild(h);
  this.form.submit();
});

Notes: was correct that switching to POST removes query-string visibility, but if GET is required the above approaches are standard and robust. If the server-side logic actually relies on click coordinates (image-map style behavior), keep the image input; otherwise the button/CSS or JS approaches are the simplest, most compatible fixes (the CSS/button routes work without JavaScript).

Recommended Answers

All 3 Replies

Member Avatar for Topi Ojala

One way, is to change your form method to "POST". That way, no query strings (?blahblah) are generated.

Member Avatar for mehmedean

Thanks, I know but it needs to be GET method. Moreover I wonder the reason and ways to control it. Any other suggestion or piece of information?

Member Avatar for mehmedean

ok I changed it back to submit button and do some css tricks...

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.