Thursday, March 10, 2011

The Curious Behavior of HTML Image Inputs, Or Why "&x=0&y=0" Is Showing Up Uninvited

While working on an internal tool I noticed that the search form was producing unexpected get requests. Here’s the form:

<form action="/Search" method="get">
  <input id="s" name="s" type="text" value="" />
  <input type="image" src="search.png" value="Search" />

I expected this to create requests like


but instead I got this:


Hmm. Initially I thought this was some sort of ASP.NET trick to remember scroll position. But I’m using MVC, which has a lot less unexpected magic in it so I quickly concluded it must be something else. I thought about those image maps that used to be all the rage back in 1999 and determined that my image input was causing the problem.

This was easily confirmed by actually clicking on the magnifying glass on my page and seeing requests like this:


Ah, so yes, it is recording where I click. While I’m sure that’s really great in some situations, it’s not what I want now. Interestingly, the solution to this problem wasn’t so simple. The cleanest workaround seems to be disabling the image input when the form is submitted. Since the browser won’t send the value of disabled inputs upon submission this solves the problem.

Here’s a tiny line of jQuery which solved the problem for me:

// disable the image submit buttons so the browser doesn't add &x=&y= to the qs
$('form.strip-img-inputs-on-submit').submit(function (e) {
    $(this).find('input[type=image]').attr('disabled', true);

Essentially all this does is find all forms with a certain class and disable image inputs when submitted.


Taibai Li said...

qihang0611coach outlet store online
pandora jewelry
michael kors outlet
oakley sunglasses
coach factory outlet
christian louboutin sale
coach outlet
true religion jeans
toms shoes
nike air max
chanel online shop
ralph lauren
ray ban sunglass
polo ralph lauren
tory burch outlet
burberry outlet online
gucci outlet online
ray ban uk
kate spade uk
cheap ray ban sunglasses
ray ban glasses
cheap jordans
coach outlet
true religion
toms outlet
michael kors bags
michael kors outlet online
coach outlet online
michael kors bag

mao qiuyun said...

juicy couture outlet
soccer jerseys
ralph lauren outlet
hermes bags,
christian louboutin outlet
louis vuitton bags,
louis vuitton handbags
cheap nfl jerseys,
fitflop shoes
ugg boots,
oakley sunglasses wholesale,
michael kors uk
michael kors outlet
the north face clearance
manchester united jersey
iphone 6 cases
michael kors uk
rolex watches
coach outlet store,
giuseppe zanotti outlet
converse all star
air max 2015
mcm handbags
michael kors factory outlet,
michael kors factory outlet,
cheap soccer jerseys
true religion jeans,
tory burch shoes
hermes birkin
coach outlet
tory burch outlet online
oakley sunglasses