Вопросы Теги

Несколько кнопок отправки в HTML-форме - назначьте одну кнопку по умолчанию [дубликат]

У меня есть форма с тремя кнопками отправки, как показано ниже: 

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

Ряд кнопок представляет собой сочетание кнопок отправки, сброса и JavaScript.Порядок кнопок может быть изменен, но в любом случае кнопка сохранения остается между предыдущей и следующей кнопками.

Проблема здесь в том, что когда пользователь нажимает Enter для отправки формы, переменная сообщения «COMMAND» содержит «Prev»; нормально, так как это первая кнопка отправки в форме. Однако я хочу, чтобы кнопка «Далее» срабатывала, когда пользователь отправляет форму через кнопку Enter . Это похоже на установку ее в качестве кнопки отправки по умолчанию, даже если перед ней есть другие кнопки.

126
задан Peter Mortensen 14 July 2019 в 15:19
поделиться

4 ответа

Мой совет - не сопротивляйтесь такому поведению. Вы можете эффективно изменить порядок с помощью поплавков. Например:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

с:

#buttons { overflow: hidden; }
#buttons input { float: right; }

эффективно изменит порядок, и таким образом кнопка "Next" будет значением, спровоцированным нажатием enter.

Этот вид техники будет покрывать многие обстоятельства без необходимости прибегать к более хакерским методам JavaScript.

.
73
ответ дан 24 November 2019 в 00:52
поделиться

Первая кнопка всегда по умолчанию; это не может быть изменено. Хотя вы можете попытаться исправить это с помощью JavaScript, форма будет вести себя неожиданно в браузере без сценариев, и есть некоторые угловые случаи, о которых стоит подумать. Например, код, на который ссылается Зоран, случайно отправит форму при вводе, нажмите на , чего обычно не произойдет, и не поймает поведение IE при отправке форма для ввода нажмите на другое неполевое содержимое в форме. Поэтому, если вы нажмете какой-нибудь текст в

в форме с этим скриптом и нажмете Enter, будет отправлена ​​неправильная кнопка ... особенно опасно, если, как указано в этом примере, реальное значение по умолчанию кнопка "Удалить"!

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

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(примечание: позиционирование используется для вывода кнопки за пределы экрана, потому что display: none и visibility: hidden имеют побочные эффекты, зависящие от браузера, то есть ли кнопка воспринимается как по умолчанию и отправлено ли оно.)

80
ответ дан 24 November 2019 в 00:52
поделиться

Нельзя использовать одноименные кнопки. Это плохая семантика. Вместо этого, вы должны модифицировать свой бэкэнд, чтобы искать различные значения имен:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Так как я не знаю, какой язык вы используете на бэкэнде, я дам вам псевдокод:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}
0
ответ дан 24 November 2019 в 00:52
поделиться

Если вы используете jQuery, то это решение из комментария, сделанного здесь, довольно ловкое:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Просто добавьте class="default" к кнопке, которую вы хотите сделать кнопкой по умолчанию. Это поместит скрытую копию этой кнопки в начало формы.

28
ответ дан 24 November 2019 в 00:52
поделиться