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

Нажатие "Возврат" в HTML-форме с несколькими кнопками Submit-Buttons

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

опытным пользователям нравится отправлять свои формы, нажимая "enter" или "return" вместо нажатия на соответствующую кнопку.

К сожалению, браузер будет искать первую кнопку отправки текущей формы и использовать ее для выполнения формы-submit. так как в моей форме вторая кнопка является фактической кнопкой отправки, мне нужно сказать браузеру использовать эту конкретную кнопку (или связанный с ней URL-адрес действия).

Я не связываю javascript-слушателей, которые ищут нажатие клавиши или что-то в этом роде. поэтому я ищу лучший подход к этой проблеме. однако, javascript или jquery-решения (без keypressed-listerner) приветствуются.

Большое вам спасибо за вашу помощь заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы могли бы теоретически, по крайней мере, иметь три submit кнопки в вашей форме.

Кнопка two - это существующая "менее важная" кнопка (от половины до формы), кнопка три - это существующая кнопка "фактический-отправить" из вашей существующей формы.

Кнопка должна быть скрыта (с использованием CSS display:none или visibility: hidden) и должна выполнять точно ту же функцию, что и текущая 'actual-submit'. Я думаю, что это будет первая кнопка, которая будет найдена браузером, независимо от ее видимости.

<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> />
<input class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>

Отредактировано в ответ на комментарии:

Я думал, что скрытые кнопки также были отключены по умолчанию? [Md5sum]

Действительная точка, но я допустил ошибку тестирования только в Firefox (3.5.7, Ubuntu 9.10) перед публикацией, в которой метод работал 1 для обоих. Полный файл xhtml вставляется (ниже), который впоследствии формирует основу моего тестирования для этих комментариев.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>3button form</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
        <script type="text/javascript" src="js/jquery.js"></script>


        <script type="text/javascript">

$(document).ready(

    function() {

        $('input[type="submit"]').click(
            function(e){
                alert("button " + $(this).attr("name"));
            }
        );

    }
);
        </script>


</head>

<body>

<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> 
<input name="two" class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="three" type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>


</body>

</html>

display: none должен помешать кнопке быть активной частью формы (включенной в результирующий набор и имеющей право на кнопку по умолчанию); visibility: hidden не должен. Однако некоторые из этих случаев ошибочны некоторыми браузерами. Обычный способ иметь невидимую первую кнопку отправки - position: absolute; и переместить ее с страницы (например, с левым: -4000px). Это уродливое, но надежное. Также полезно изменить свой табуиндекс, чтобы он не вмешивался в ожидаемый порядок табуляции.

Есть, по крайней мере, два момента, которые я должен поднять к этому комментарию. В порядке:

  • "Нормальный путь..." Я не знал, что был нормальный путь, и представил этот вариант как возможность достичь цели, полностью осознав, что существует/почти наверняка любое количество лучших способов, особенно учитывая, что я не вижу веских оснований для нескольких кнопок отправки в той же форме.
  • Учитывая последнее предложение вышеупомянутого пункта, я хотел бы дать понять, что я не защищаю это. Вообще. Это кажется уродливым и не смысловым, взломать несколько кнопок отправки, причем в экземпляре OP одна кнопка, по-видимому, не является кнопкой отправки.
  • Понятие "позиция: абсолютное; left: -4000px; `приходил ко мне, но он, похоже, действовал так же, как" видимость: hidden ", и у меня есть врожденная неприязнь к" position: absolute "по какой-то причине... поэтому я пошел с вариант, который был менее неприятным для меня на момент написания... =)

Я ценю ваш комментарий о tabindex, хотя, это было то, о чем я никогда не задумывался, вообще.

Извините, если я немного отскакиваю, поздно, я устал... yadda-yadda; Я тестирую в разных браузерах с момента моего возвращения домой, и кажется, что Firefox 3.5+ дает такое же поведение - сообщая "одну кнопку" как на Windows XP, так и на Ubuntu 9.10, все браузеры Webkit (Midori, Epiphany, Safari и Chrome) терпят неудачу и сообщите "две кнопки".

Так что это определенно неудачная идея display: none; кнопки отправки. В то время как visibility:hidden по крайней мере работает.

  • Под этим я подразумеваю, что нажатие 'enter' вызвало событие form-submit или событие click первой кнопки отправки формы, независимо от того, был ли этот первый submit `display: none;` или ` видимость: hidden`.

    Помните, что мои навыки jQuery ограничены, поэтому использовались тесты (я запускал только один раз, чтобы попытаться предотвратить конфликты, возникающие при выполнении, комментируя тот, который я не запускал в то время, оба представлены - один, очевидно, прокомментированный) вполне может быть недостаточным и нерепрезентативным.

Ответ 2

измените свою первую кнопку на <input type="button" />.

Ответ 3

Что делает первая кнопка? Если вам просто нужна кнопка для присоединения js-слушателя к, который не отправляется, используйте

<button type="button" id="myButton">Text Here</button>

Ответ 4

Другим обходным решением является создание дополнительного нефункционального ввода ввода в самом начале формы и скрыть его с помощью непрозрачности:

<input type="submit" value="" onclick="return false;" style="opacity: 0">

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

То, что вы получаете с помощью onclick="return false;", заключается в том, что форма не будет отправлена ​​при нажатии "Enter"; без перезагрузки страницы.

Ответ 5

Можно ли использовать абсолютное позиционирование на своей менее важной кнопке отправки и отображать ее после вашей основной кнопки отправки в HTML? Итак, вы можете:

<form>
<p>
Stuff
<input type="submit" value="This is my main submit button" />
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; />
</p>
</form>

Вторая кнопка отправки появится сначала на экране, но основная кнопка отправки должна иметь приоритет при нажатии ввода.

Ответ 6

<script>
$(function(){
    $('#button-new-captcha').click(function(){
        $('input[name=button-submit]').prop('name', 'button-new-captcha').click();
    });
});
</script>

<div class="buttons">
    <a class="btn btn-cancel" href="/login">Cancel</a> 
    <a class="btn btn-default" href="#" id="button-new-captcha">New Image</a> 
    <input type="submit" name="button-submit" class="btn btn-default" value="Send Username">    
</div>