views:

302

answers:

4

I'm using an image as the submit button for a search form, i.e.:

<input id="search" type="image" alt="Search" src="/images/searchButton.png" name=""/>

This has an unfortunate side effect in Chrome and Firefox--the parameters &x=0&y=0 appear on the end of the search results URL, for example if I search for "food" I am directed to the page:

main/search?search=food&x=0&y=0

Some hunting around online has indicated that this is standard behavior when you use an image to submit a form.

I noticed that Digg.com uses an image to submit its search form but avoids this behavior. I can't figure out how they do it. They don't seem to be using Javascript to submit the form. Can anyone tell?

A: 

You could use Javascript to submit the form like that, it's still the easiest way:

<script>
yourForm.onSubmit = function() {
 location.href = 'main/search?search=' + encodeURIComponent(yourForm.elements['query'].value);
 return false;
}
</script>

Unfortunately I don't know how they do it without Javascript.

EDIT: Btw you could also use a simple which will submit the form when it gets clicked.

watain
+3  A: 

Digg is using JavaScript to do that. Try submitting the search form with JavaScript disabled in your browser.

Tatu Ulmanen
Great call, not sure how I missed that.
Jack7890
+1  A: 

Those parameters denote the location in which the click was exercised upon the image, which is the default behavior of most if not all browsers when it comes to using images as submit buttons. You can use a workaround that basically goes through JavaScript to submit your form, much like what you see in watain's example. Or you can create a submit button thats not a form element, by utilizing form.submit() as the action attached to that image.

drlouie - louierd
+2  A: 

Instead of using an <input type="image">, you could use a <button> element:

<button type="submit" style="border: 0; background: transparent">
  <img src="image.png"></img>
</button>
Brian Campbell