1

I have a search form 

<!-- SEARCH --> <form name="search" class="search" action="/search/" method="get"> <input type="text" size="20" name="keywords" class="searchfield" value="Search for Property" onclick="clearSearchField()" title="Enter search keywords here. Ex- project name, city, state, etc." /> <input type="image" src="/media/images/elements/search_icon.png" alt="Search" title="Click here to search" class="searchbutton" /> </form>

When I submit, besides keywords I get two extra variables x and y in the query string - 

http://127.0.0.1/search/?keywords=Search+for+Property&x=6&y=7

Why?

EDIT Changing the value of keywords does change the value of x and y

http://127.0.0.1/search/?keywords=foo&x=0&y=0
Improve this question

4 Answers 4

Reset to default
2

Using type="image" will submit the x and y coordinates of where the button was clicked.

It's not really necessary unless you need this information for some reason, if you need the appearance of an image you can use CSS to style it, or use the <button> tag which allows HTML content.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

okay. can I let it be? Or is it better to use the css-background property?
It doesn't really matter a lot, but you definitely should just change it to anything other than type="image" it's a bad habit just for appearances - so use type="submit" on either <input> or <button>. Use CSS for styling, and images for actual content - as always.
@wretrOvian: You will find you have a lot more control using CSS anyways. Best of luck.
2

That's because you abused an <input type="image"> to have a submit button with a background image instead of just using a <input type="submit"> with a CSS background-image property.

The <input type="image"> is intended to provide an image map to the enduser where the enduser can click a certain location in the image. The x and y coordinates which you're seeing is the click location on the image map.

Use a normal <input type="submit"> with a CSS background-image property. E.g.

.searchButton { background-image: url('/media/images/elements/search_icon.png'); width: 20px; height: 20px; border: 0; cursor: pointer; }
Improve this answer

Comments

0

Amongst other things, an HTTP GET request means that form data is encoded in the onward URL. This is defined, expected behaviour:

http://www.cs.tut.fi/~jkorpela/forms/methods.html#fund

… and you are passing in X & Y co-ordinates from your search 'submit' button, which is actually an image map.

Improve this answer

Comments

0

It is being sent because you use the input type image, why? Don't know exactly but you could call the submit using the onclick event and Javascript :

<script language="javascript"> function submitMyForm() { document.search.submit(); } </script> <form name="search" class="search" action="/search/" method="get"> <input type="text" size="20" name="keywords" class="searchfield" value="Search for Property" onclick="clearSearchField()" title="Enter search keywords here. Ex- project name, city, state, etc." /> <img src="/media/images/elements/search_icon.png" onclick="submitMyForm()" title="Click here to search" class="searchbutton"> </form>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.