n a
n a

Reputation: 2802

Form submit creates automatic GET vars?

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

Answers (4)

Jivago
Jivago

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

BalusC
BalusC

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

Ben
Ben

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

No Results Found
No Results Found

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

Related Questions