Подтвердить что ты не робот

<button type = "submit" > совместимость?

Я хотел бы иметь кнопку отправки, которая представляет другое значение, чем отображается на кнопке. С <input type="submit"> вы не можете этого сделать. Однако с <button type="submit"> это могут быть два разных значения. Вопрос в том, будет ли он работать во всех браузерах?

Попробуйте этот тестовый код здесь:

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="btn" value="val">text</button>
</form>

В FF 3.6 он обновляет мою адресную строку с обоими значениями соответственно (и отвечает мне, нажимая enter в текстовом поле). В IE 8 он также принимает нажатие enter, отображает текстовое значение в адресной строке, но он не показывает значение кнопки как параметр GET вообще... означает ли это, что он не отправляет его?

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

Тест 2:

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="submit1" value="submit1">submit</button>
    <input type="submit" name="submit2" value="submit2"/>
    <input type="submit" name="submit3" value="submit3"/>
</form>

В IE8 нажатие кнопки ввода не отправляет ни одну из кнопок, но нажатие кнопки submit1 отправит значение. Он отправит "submit", а не "submit1", который не соответствует FF. Однако отправка формы только отправляет значение одной кнопки в обоих браузерах, что означает, что я мог бы проверить, какая кнопка была нажата, проверяя, существует ли GET['submitX']! Chrome имеет несколько другое поведение при нажатии enter (подает кнопку2). Opera кажется совместимой с FF... но все 4 браузера только подают одну кнопку. У меня нет более ранних версий браузеров, установленных хотя.... кто-нибудь знает, работает ли она в более ранних версиях, в частности IE6?

4b9b3361

ОТВЕТЫ

Ответ 1

Старый пост, но я думаю, что есть решение, которое было пропущено здесь. У button[type=submit] всегда были проблемы с непоследовательным поведением, особенно со старыми IE, а из тестов @Mark похоже, что у нас все еще есть проблемы.

Вместо этого вы можете использовать два разных значения для атрибута name input[type=submit] и проанализировать эту серверную сторону, чтобы получить правильное действие. Например, вы можете:

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="submit" name="action[do_something]" value="Do Something Cool"/>
    <input type="submit" name="action[do_another]" value="Do Something Dangerous"/>
</form>

Получается только успешная (по клику или по умолчанию) пара значений имени, так, например, в PHP вы можете легко сделать что-то вроде:

<?php
if (isset($_GET['action']['do_something'])) {
    // do something
} else {
    // do another thing
}
?>

Обратите внимание, что действие по умолчанию всегда будет первым, которое появляется в источнике.

Ответ 2

Вот альтернатива, если вы не уверены в использовании тега кнопки.

<form method="get" action="">
    <input type="text" name="txt" />
    <input type="hidden" name="myinput" value="myvalue" />
    <input type="submit" name="submit" />
</form>

Это будет более согласованным, чем тег кнопки, так как некоторые браузеры фактически отправляют текст внутри тегов кнопок, а не его атрибут value. Например

<button name="mybutton" type="submit" value="one">Two</button>

В некоторых браузерах у вас будет "один", в других - "Два".

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

        

В этом примере текст на дисплее ( "Кнопка 1" или "Кнопка 2" ) будет отправлен назад.

Firefox: "? txt = & submit = Button + 1" IE: "? Txt = & submit = Button + 1" Safari: "? Txt = & submit = Button + 1"

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

Как окончательная альтернатива, есть ли причина, по которой вы не можете дать им поле формы, которое позволяет им выбирать поток управления, а не иметь две кнопки?

<form method="get" action="">
    <input type="text" name="txt" />
    <select name="myname">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    <input type="submit" name="submit" value="Go" />
</form>

UPDATE

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

1) Кнопки должны делать то же самое - просто отправьте форму.

2) Вы должны обнаружить серверную сторону, если у вас есть действительная форма (если они работают последовательно и попали в первый из двух отправлений, у вас будут пустые входы для второй половины формы, что делает ее недействительной).

3) Вы должны обнаружить серверную сторону, если у вас достаточно информации для выполнения вычисления или обновления, упомянутых в вашем комментарии.

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

Это отрицает необходимость того, чтобы определенные кнопки делали определенные вещи - пользователь мог вводить первую половину формы и все же нажимать кнопку внизу - так что вы не хотите, чтобы ваша логика была основана на кнопке.

Ответ 3

Это сделает трюк в IE

<button type="submit" name="submit1" value="submit1" onclick="this.value='submit1' ">submit</button>

Простой и работает во всех браузерах

Ответ 4

Используйте скрытые поля, это лучший способ сделать это.

<input type="hidden" value="any value you want to enter" />

Ответ 5

Это то, что я сделал для этой проблемы. Он работает в браузерах.

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="hidden" name="btn" id="hiddenbtn" />
    <button type="submit" name="btn1" value="val">text</button>
</form>

Javascript (требуется jQuery):

$(document).ready( function{
    $(":submit[name='btn1']").on("click", function() {
        $("#hiddenbtn").val($(this).val());
    });
});

Ответ 6

Не прикрепляйте значения к кнопкам типа submit. Кнопка с типом submit отправляет форму. Это все, что он делает и должен когда-либо надеяться. Любой метод подачи любой формы равен всем другим методам подачи той же формы в цели и области данных. Чтобы быть логически правильными с целью HTML, вам нужно использовать отдельные формы, если вы хотите, чтобы разные данные были условно возвращены при отправке.

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