Reputation: 2802
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
Upvotes: 1
Views: 402
Reputation: 826
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>
Upvotes: 0
Reputation: 1108712
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;
}
Upvotes: 2
Reputation: 7597
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.
Upvotes: 0
Reputation: 102745
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.
Upvotes: 2