Нажим «Возвращения» в Форме HTML с несколькими кнопками отправки

Question

Нажим «Возвращения» в Форме HTML с несколькими кнопками отправки

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

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

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

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

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

20

javascript html forms submit

задан DiegoFrings 20 January 2010 в 15:23

4 ответа

Это вариант использовать абсолютное позиционирование на вашей менее важной кнопке отправки, и она отображается после вашей основной кнопки «Отправить» в 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>

Ваша кнопка «Вторичная отправка» будет отображаться сначала на экране, но кнопка «Основная отправка» должна принять приоритет при нажатии при наличии.

0

ответ дан 30 November 2019 в 00:35

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

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

3

ответ дан 30 November 2019 в 00:35

Измените вашу кнопку <1116838] <кнопку ввода = «Кнопка» /> .

19

ответ дан 30 November 2019 в 00:35

Другие вопросы по тегам:

javascript html forms submit

Похожие вопросы:

score 8 · Accepted Answer

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

Кнопка «Два» - это существующая кнопка «менее важная» (от на полпути вниз по форме), кнопка три - это существующая «фактическая кнопка отправки» из существующей формы.

Кнопка должна быть скрыта (с использованием CSS дисплея: нет или видимость: Hidden ) и должен выполнять точно такую же функцию, что и ваш текущий «фактический». Я думаю, что это все равно будет первой кнопкой, которую можно найти браузером, независимо от его видимости.

<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) перед публикацией, в которой работала техника ¹, для обоих. Полный файл 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>

Дисплей: Нет , не должен предотвратить активную часть кнопки (включенную в набор результатов и подходящих для набора по умолчанию-Ness); Видимость: скрытый не должен. Однако оба из этих случаев ошибочны некоторыми браузерами. Нормальный способ иметь невидимую первую кнопку отправки - это позиции : абсолют; Это и переместите его со страницы (например, с левой помощью: -4000px). Это некрасиво, но надежно. Это также хорошая идея, чтобы изменить его Tabindex, поэтому он не вмешивается в ожидаемую форму заказа на заказ.

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

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

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

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

Итак, это определенно достойная идея к дисплею : нет; кнопка «Отправить». Принимая во внимание, что видимость : скрыто , по крайней мере, работает.

, посредством которого я имею в виду, что ударяя «Enter» вызвал событие «Отправить форма» или событие Click первой кнопкой отправки формы, независимо от того, является ли первым представлением «отображение: None; или` видимость: скрыто `

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