Тип ввода изображения отправить значение формы?

Question

Я использую этот код, чтобы попытаться передать значение через форму, но, похоже, он ничего не передает ...

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

Этот код неправильный?

<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />

Поэтому я хочу передать значение в value = "myValue".

Форма работает нормально, так что это не проблема, мне просто нужна помощь с отправкой части ввода, поскольку я знаю, что это работает.

Спасибо

Answer 1

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

Answer 2

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

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

Надеюсь, это поможет!^ _ ^

Answer 3

Я обнаружил, что кнопки-изображения действительно возвращают ответ, но вы НЕ должны использовать параметр-значение.То, что я вижу, это две версии name="MYNAME" с окончаниями .X и .Y.

Например:

<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">

Это в пределах от <form> до </form>.Если вы щелкнете по изображению, будут возвращены значения STOP.X и STOP.Y с числовыми значениями.Наличие любого указывает на то, что кнопка изображения STOP была нажата.Вам не нужен специальный код.Просто относитесь к ней как к другому виду кнопки «отправить», которая возвращает пару расширенных ИМЕН.

Я пробовал это в Safari, Firefox и Chrome.Изображение не отображалось в Safari, но там, где оно должно было находиться, мой курсор превратился в значок пальца, и я мог щелкнуть по нему.

Answer 4

Я был в том же месте, что и вы, наконец-то я нашел аккуратный ответ:

<form action="xx/xx" method="POST">
  <input type="hidden" name="what you want" value="what you want">
  <input type="image" src="xx.xx">
</form>

Answer 5

Некоторые браузеры (IIRC - это только некоторые версии Internet Explorer) только отправляют координаты карты изображения (в name.x и name.y) и игнорируют значение.Это ошибка.

Обходные пути:

• Имейте только одну кнопку отправки и используйте скрытый ввод для отправки значения
• Используйте обычные кнопки отправкивместо карт изображений
• Используйте уникальные имена вместо значений и проверьте наличие name.x / name.y

Answer 6

Вот что я пытался сделать и как я это сделал.Я думаю, что вы хотели сделать что-то подобное.У меня была таблица с несколькими строками, и в каждой строке у меня был ввод с изображением типа.Я хотел передать идентификатор, когда пользователь нажал на эту кнопку изображения.Как вы заметили, значение в теге игнорируется.Вместо этого я добавил скрытый ввод вверху таблицы и, используя javascript, поместил туда правильный идентификатор перед отправкой формы.

<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">

Таким образом, правильный идентификатор будет отправлен с вашей формой.*

Answer 7

Входные данные типа = "изображение" не отправляют свою пару имя / значение, когда они используются для отправки формы. Для меня это звучит как ошибка, но так оно и есть.

Чтобы обойти это, вы можете заменить input на button типа = "submit" и поместить элемент img внутрь.

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

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>

Answer 8

Решение:

<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">  
    <input type="hidden" name="accion" id="accion"/>


<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>


function validaFrmSeguimiento(accion)
{
    document.frmSeguimiento.accion.value=accion;

}

С уважением, jp

Answer 9

Вы можете использовать переключатель / флажок и установить его, чтобы скрыть кнопку в css, а затем присвоить ей ярлык с изображением.

input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}

Тогда на странице:

<input type="radio" name="emotion" id="mysubmitradio" />
        <label for="mysubmitradio"><img src="images/f.jpg" />
    <span>if you need it</span></label>

А затем установите его для отправки с использованием JavaScript:

document.forms["myform"].submit();

Answer 10

Вы можете использовать атрибут formaction (для type = submit / image, переопределение действия формы) и передавать нечувствительное значение через URL (GET-запрос).

Опубликованный вопрос не является проблемой в старых браузерах (например, в Chrome 49+).