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.

4 Answers 4

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;" />
4
  • 3
    Finally I have adopted your solution, instead of coding another 5-6 or more.. lines of javascript code :)
    – djmzfKnm
    Commented Apr 30, 2009 at 4:16
  • sweet works a champ once you add in every single style element mentioned :)
    – rogerdpack
    Commented Feb 15, 2012 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
    Commented Dec 6, 2013 at 6: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
    Commented Jul 11, 2014 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!

2
  • 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: digg.com/search
    – djmzfKnm
    Commented Apr 29, 2009 at 10:11
  • Your answer looks good, I think javascript is the way to strip these parameters....
    – djmzfKnm
    Commented Apr 29, 2009 at 10:39
1
document.getElementById("formid").submit = function() {
    location = "/search/?search=" + encodeURIComponent( document.getElementById("search-box").value );
    return false;
};
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.

1
  • ... after a couple of years. Commented Oct 15, 2018 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.