53

I have created a form in my application as follows:

<form action="/search/" method="get">
   <input id="search-box" name="search" type="text" size=30 title="Search" value="" />
   <input id="search-submit" type="image" alt="Search" src="/images/search-button.gif" /> 
</form>

But when I am submitting my form then URL is created as below:

mysitename.com/search/?search=hello&x=0&y=0

Can anyone please tell me why this x and y is coming in my URL. On more thing instead of image button if I am changing my form code as below then its working fine, 

<form action="/search/" method="get">
   <input id="search-box" name="search" type="text" size=30 title="Search" value="" />
   <input id="search-submit" type="submit" value="Search"/> 
</form>

but I need an image button to make my form look good. Please tell me how to remove these x and y parameteres from URL.

djmzfKnm
  • 26,679
  • 70
  • 166
  • 227

4 Answers4

74

You'll always get mouse co-ordinates for a submit button type="image"

You can use a standard submit type button and just apply styles to it to change the look.

<input type="submit" id="search-submit" value=""
    style="background-image: url(/images/search-button.gif); border: solid 0px #000000; width: WIDTHpx; height: HEIGHTpx;" />
Eoin Campbell
  • 43,500
  • 17
  • 101
  • 157
  • 3
    Finally I have adopted your solution, instead of coding another 5-6 or more.. lines of javascript code :) – djmzfKnm Apr 30 '09 at 04:16
  • sweet works a champ once you add in *every single style element* mentioned :) – rogerdpack Feb 15 '12 at 23:46
  • If you want a submit a value, you can add "color: transparent;" to the style. It worked in the latest versions of Chrome, Safari and Firefox. – 23inhouse Dec 06 '13 at 06:45
  • 2
    I had to add `background-color:transparent;` to ensure identical display, since my image had transparent pixel that looked white otherwise – Pavel P Jul 11 '14 at 22:29
4

They are the mouse coordinates of the click. I don't believe there's any way to prevent them - if you use an <input type='image'> then you get them. Why is it a problem? Can't you just ignore them?

Answering Prashant's comment: Digg are adding an onclick handler to the <input> (or possibly an onsubmit handler to the form) which builds the neat-looking search URL and redirects the browser to that URL, and then returns false to prevent the <input> from submitting the form itself. If you turn off JavaScript you'll see that you do get the x and y parameters in the URL. Clever!

RichieHindle
  • 272,464
  • 47
  • 358
  • 399
  • I want to ignore them caz my users shares search URL of my website accross the web and hence if the x and y will come in my url then it will be a long URL which will not look good as well as its not well for SEO too. And I think they can be removed How? I don't know but Digg is doing this, just have a look at thier search page: http://digg.com/search – djmzfKnm Apr 29 '09 at 10:11
  • Your answer looks good, I think javascript is the way to strip these parameters.... – djmzfKnm Apr 29 '09 at 10:39
1
document.getElementById("formid").submit = function() {
    location = "/search/?search=" + encodeURIComponent( document.getElementById("search-box").value );
    return false;
};
Chad Grant
  • 44,326
  • 9
  • 65
  • 80
0

You can simply set a value, for an image button, this will override the regular coordinates behaviour. It worked for me.

For example : 

<input type="image" value="submit" src="sup.png" name="supprimer" />

will return the php variable $_POST['supprimer'] and not its coordinate as image button. Hope this trick will help you.

CodeNotFound
  • 22,153
  • 10
  • 68
  • 69
DarkF
  • 9
  • 1