开发者

Form submit creates automatic GET vars?

开发者 https://www.devze.com 2023-03-16 03:47 出处:网络
I have a search form <!-- SEARCH --> <form name=\"search\" class=\"search\" action=\"/search/\" method=\"get\">

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="searchbutto开发者_JAVA百科n" />
</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


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.


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;
}


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.


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>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号