web-dev-qa-db-ja.com

画像タイプボタンのあるHTMLフォームで送信時にxとyを削除する方法

アプリケーションで次のようにフォームを作成しました。

<form action="/search/" method="get">
   <input id="search-box" name="search" type="text" size=30 title="Search" value="" />
   <input id="search-submit" type="image" alt="Search" src="/images/search-button.gif" /> 
</form>

しかし、フォームを送信すると、URLは次のように作成されます。

mysitename.com/search/?search=hello&x=0&y=0

このxとyが私のURLに含まれる理由を誰かに教えてもらえますか？以下のようにフォームコードを変更している場合、画像ボタンの代わりに、それはうまくいきます、

<form action="/search/" method="get">
   <input id="search-box" name="search" type="text" size=30 title="Search" value="" />
   <input id="search-submit" type="submit" value="Search"/> 
</form>

フォームを美しく見せるために画像ボタンが必要です。これらのxおよびyパラメータをURLから削除する方法を教えてください。

htmlformsurlquery-string
50
Prashant

送信ボタンのtype = "image"のマウス座標は常に取得されます

標準の送信タイプボタンを使用して、スタイルを適用するだけで外観を変更できます。

<input type="submit" id="search-submit" value=""
    style="background-image: url(/images/search-button.gif); border: solid 0px #000000; width: WIDTHpx; height: HEIGHTpx;" />
71
Eoin Campbell

それらはクリックのマウス座標です。私はそれらを防ぐ方法はないと思います-あなたが<input type='image'>を使えばそれらを手に入れます。なぜそれが問題なのですか？それらを無視することはできませんか？

Prashantのコメントに答える：Diggはonclickハンドラーを<input>（またはフォームへのonsubmitハンドラー）に追加しています。これにより、見栄えの良い検索URLが作成され、ブラウザーがそのURLから、falseを返し、<input>がフォーム自体を送信しないようにします。 JavaScriptをオフにすると、URLでxおよびyパラメーターを取得することがわかります。賢い！

4
RichieHindle

画像ボタンの値を設定するだけで、通常の座標動作を上書きできます。それは私のために働いた。

例えば ​​：

<input type="image" value="submit" src="sup.png" name="supprimer" />

画像ボタンとしての座標ではなく、php変数$_POST['supprimer']を返します。このトリックがあなたを助けることを願っています。

1
DarkF
document.getElementById("formid").submit = function() {
    location = "/search/?search=" + encodeURIComponent( document.getElementById("search-box").value );
    return false;
};
1
Chad Grant