How to remove x and y on submit in HTML form with Image type button?

HtmlFormsUrlQuery String

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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;" />

Solution 2 - Html

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!

Solution 3 - Html

document.getElementById("formid").submit = function() {
    location = "/search/?search=" + encodeURIComponent( document.getElementById("search-box").value );
    return false;
};

Solution 4 - Html

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiondjmzfKnmView Question on Stackoverflow
Solution 1 - HtmlEoin CampbellView Answer on Stackoverflow
Solution 2 - HtmlRichieHindleView Answer on Stackoverflow
Solution 3 - HtmlChad GrantView Answer on Stackoverflow
Solution 4 - HtmlDarkFView Answer on Stackoverflow