輸入類型=圖像的名稱和值不被IE和Opera

發送當窗體具有多個圖像輸入和服務器側使用其名稱和/或值區分被點擊哪一個，它完美地在Firefox瀏覽器。但是，人們經常在發現HTML指定不需要發送任何內容之前編寫整個內容，因此某些瀏覽器不會發送它。輸入類型=圖像的名稱和值不被IE和Opera

這不是關於發送任何隨機對象，而是發送一對爲input_name=input_value。這裏最好的情況例子是我遇到的情況：一個元素列表全部在一個表單中，並且所有元素都伴隨着按鈕。name="delete" value="<item_id>"

我該如何解決這個問題？

來源

2010-03-01 naugtur

我有同樣的問題http://stackoverflow.com/questions/3139491/request-params-request-form-not-working-in-internet-explorer你的答案救了我。上帝祝福你。 – 2010-06-29 14:43:09

IE很棒。如果你做' IE將發佈你點擊的圖像的Y座標！ – teynon 2013-05-14 17:07:07

的問題解決了一半到現在：like here

但它並沒有允許獲得的價值！

正確的答案是：當用戶啓動單擊它

$('input[type=image]') 
.unbind('mousedown') 
.mousedown(function(){ 
    $(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />'); 
});

此代碼創建輸入的隱藏副本。解綁（'mousedown'）是爲了確保它只發生一次，即使你把代碼放在一個奇怪的應用程序中的多個地方，它可能會被多次調用。

我建議把它$(document).ready();

來源

2010-03-01 16:16:13 naugtur

我希望這可以節省一些人很多重寫別人的代碼。 – naugtur 2010-03-01 16:17:49

如果JavaScript不可用，這會中斷。 – Quentin 2010-03-03 09:49:28

哦，拜託...當javascript被禁用時，它不會改變，也不會中斷任何事情。我建立了問題並立即回答。只是想爲具有相同類型問題的人發佈解決方案，因爲在討論此主題時沒有提及。現在你們讓我想刪除它。它會困擾你嗎？我試圖幫助人們處理像我正在處理的設計不當的應用程序接口？ – naugtur 2010-03-03 10:09:20

每HTML spec，點擊一個IMAGE輸入將返回參數：

name.x = x值和name.y = y值，其中「名稱」是名稱屬性的值

具有與點擊位置對應的x值和y值。

當然，服務器代碼來處理這將是一個有點討厭，但你可能只是檢查所有的查詢參數鍵使用正則表達式：

/^(.*)\.[xy]$/

搜索的IMAGE輸入鍵來確定其中IMAGE被點擊。

來源

2010-03-01 16:21:59 Dancrumb

這就是我在半解決方案鏈接中的答案。問題是關於名稱和價值。如果不是這將是一個重複的問題 – naugtur 2010-03-01 16:24:30

@naugtur：可能想進一步澄清你的問題。目前它說「名稱和/或*值」，並且你談論檢測哪個圖像被點擊了......這是我讀的方式，這意味着這個答案是完全正確的（和「正確」的方式來做到這一點根據html規範 - 加上它將工作沒有JavaScript）。 – Alconja 2010-03-01 22:45:16

@naugatur：值得注意的是'name'和'value'之間有一對一的映射關係。根據您的應用程序，從查詢字符串捕獲「名稱」並使用它來推斷服務器上的「值」可能就足夠了，因爲'值'不是用戶可更改的。是的......如果您有這些表單的通用處理程序（並且從名稱推斷值不恰當），則此方法存在一些問題......但它可能適用於* some *應用程序 – Dancrumb 2010-03-02 16:31:21

我試着用這個樣本：

<form action="#" method="GET"> 
    <input type="text" name="t" value="Text here"><br> 
    <input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br> 
    <input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br> 
</form>

而且我得到以下網址：

FF 3.6：x.html T =文字+這裏& BX = 19 &通過= 17 & b = 2＃
IE 8：x.html噸=文本+這裏& BX = 22 &通過= 18
我è7：x.html噸=文本+這裏& a.x = 185 & a.y = 51
歌劇10：x.html噸=文本+這裏& a.x = 107 &一個。Y = 53＃
鉻：x.html T =文字+這裏& BX = 20 &通過= 17 & B = 2＃

如此看來，所有的瀏覽器都送點東西與圖像相關的，即使它不是直接的圖像名稱。由於您需要掃描所有您期望看到的圖像名稱，因此您只需掃描imagename.x即可。 This seems to be how the spec indicates it should work.

來源

2010-03-01 16:27:11

我粗體顯示了一個重要的事實，即它不是關於發送內容。此外 - 我鏈接到一個說明image.x和image.y的外部解決方案。 – naugtur 2010-03-01 22:36:25

@naugtur：規範不會按照您希望的方式工作。要做的最簡單的事情就是根據規範編寫你的應用程序。通過查看參數列表可輕鬆檢測到哪個按鈕被點擊。你可以用javascript來僞造它，但如果你不這樣做，它會更簡單。 – 2010-03-02 15:59:19

我開始希望我沒有發佈它......這個問題是關於一個黑客，我發現可以輕鬆修復某人爲FF做的應用程序，現在他們打電話給你，讓它在別處工作。我想分享它，因爲當我需要時我沒有找到任何價值發送解決方案，而且問題在很多地方發佈。我真的不需要在這裏發佈的問題。爲了幫助別人解決問題，我在解決問題後發佈了它 – naugtur 2010-03-03 09:07:50

我想我/有類似的問題。我想點擊縮略圖並在不同的頁面上放大縮略圖。我試圖用PHP來做到這一點，但我終於不得不使用標籤。非常適合FF3和safari，但輸入圖像值沒有針對IE9或FF9發佈。我的工作是將每個圖像放在自己的窗體中，然後使用隱藏的輸入發送所需的數據。

<table> 
    <tr> 
    <td> 
     <form method="post" class="form_photo"> 
      <input type="image" name="img_photo" value="does nothing in IE9 or FF9" /> 
      <input type="hidden" name="photo" value="nameoftheimage.jpg" /> 
     </form> 
     <form method="post" class="form_photo"> 
      <input ...> 
      <input ...> 
     </form> 
     <form> ... 
    </td> 
</tr>

然後我發現了形式顯示垂直，使得它非常奇怪。 CSS來拯救。

.form_photo { display:inline; }

似乎解決了垂直問題。現在用戶可以點擊縮略圖，現在我可以訪問測試的所有瀏覽器中的值。

來源

2012-02-05 03:33:03

使用type =「image」是有問題的，因爲傳遞一個值的能力被禁用了一些愚蠢的缺乏理由。反正&儘管它不像可定製的&那樣漂亮，但只要它們是type =「button」的一部分，你仍然可以使用你的圖像。

<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>

來源

2013-01-30 12:04:26 BoyBlueSky

輸入類型=圖像的名稱和值不被IE和Opera

回答

相關問題