I'm using an image as the submit button for a search form, i.e.:开发者_StackOverflow中文版
<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?
Digg is using JavaScript to do that. Try submitting the search form with JavaScript disabled in your browser.
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>
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.
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.
精彩评论