тип ввода = имя изображения и значение, не отправляемое ie и opera

Question

Когда форма имеет несколько входов изображений и серверная сторона использует их имена и / или значения , чтобы отличить, какое из них было нажато, оно отлично работает в FireFox. Однако люди часто пишут все это, прежде чем узнают, что HTML указывает, что ничего не нужно отправлять, и поэтому некоторые браузеры не отправляют это.

Речь идет не об отправке какого-либо случайного объекта, а об отправке пары как input_name=input_value. Лучшим примером наихудшего сценария здесь было бы то, с чем я столкнулся: список элементов в одной форме и со всеми кнопками с name="delete" value="<item_id>"

Что я могу сделать, чтобы решить эту проблему?

Answer 1

В соответствии с HTML-спецификацией , щелкнув по IMAGE, вы получите параметры:

name.x = x-value и name.y = y-value, где "name" - это значение атрибута name

с x-значением и y-значением, соответствующим позиции щелчка.

Конечно, серверный код для решения этой проблемы будет немного раздражать, но вы можете просто проверить все ключи параметров запроса с помощью регулярного выражения:

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

для поиска IMAGE клавиш ввода, чтобы определить, на какую IMAGE была нажата кнопка.

Answer 2

Я пробовал с этим образцом:

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

И я получаю следующие URL:

• FF 3.6: x.html? T = текст + здесь & b.x = 19 & b.y = 17 & b = 2 #
• IE 8: x.html? T = Text + здесь & b.x = 22 & b.y = 18
• IE 7: x.html? T = Text + здесь & a.x = 185 & a.y = 51
• Опера 10: x.html? T = Текст + здесь & a.x = 107 & a.y = 53 #
• Chrome: x.html? T = Текст + здесь & b.x = 20 & b.y = 17 & b = 2 #

Так что, похоже, все браузеры отправляют что-то связанное с изображением, даже если это не имя изображения напрямую. Так как вам нужно отсканировать все имена изображений, которые вы ожидаете увидеть, вы можете просто найти imagename.x. Похоже, что спецификация указывает, что она должна работать.

Answer 3

Использование type = "image" проблематично, потому что возможность передать значение отключена по какой-то глупой причине. В любом случае, несмотря на то, что это не так настраиваемо и, следовательно, так красиво, вы все равно можете использовать изображения, если они являются частью кнопки type = "*".

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

Answer 4

Я думаю, что у меня / была похожая проблема. Я хотел нажать на миниатюру и увеличить ее на другой странице. Я пытался сделать это только с помощью PHP, но мне, наконец, пришлось использовать тег с. Работал отлично для FF3 и сафари, но значения INPUT IMAGE не публиковались для 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; }

, кажется, решил вертикальную проблему. Теперь пользователь может нажать на миниатюру, и теперь значение передается во всех браузерах, к которым у меня есть доступ к тестированию.

Answer 5

Проблема была наполовину решена до сих пор: как здесь

Но это не позволило получить значение!

Правильный ответ:

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

Этот код создает скрытую копию ввода, когда пользователь начинает щелкать по нему. Отмена ('mousedown') состоит в том, чтобы гарантировать, что это произойдет один раз, даже если вы поместите код в нескольких местах в странном приложении, и он может быть вызван несколько раз.

Я рекомендую положить его в $(document).ready();