форма без действия и где ввод не перезагружает страницу

94

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

javascript html forms Мэтт Робертс
источник
Вы хотите, чтобы его никогда не сдавали?
UpTheCreek
Если у вас есть только <form> с единственным <input>, который является текстовым полем, он не должен отправляться, когда вы нажимаете Enter, не так ли?
Zack The Human
Я хочу, чтобы он был отправлен при каком-то другом условии (на самом деле, при нажатии определенной кнопки). Проблема в том, что мне не удалось добиться того, чтобы поведение «ввод в текстовое поле» при публикации / переходе на тот же URL-адрес не происходило. Таким образом, моя тщательно созданная форма, где вам нужно ввести X, Y и Z, чтобы отправить ее, может быть ошибочно отправлена ​​пользователем, нажав Enter.
Мэтт Робертс,

Ответы:

44

Добавьте в форму обработчик onsubmit (через простой js или jquery $ (). Submit (fn)) и верните false, если не выполняются ваши конкретные условия.

Если вы не хотите, чтобы форма отправлялась, когда-либо - в этом случае почему бы просто не пропустить атрибут «действие» в элементе формы?

K Prime
источник
151
Форма без actionатрибута не является формой в соответствии со стандартами - и фактически вызовет перезагрузку страницы в некоторых браузерах. Я обнаружил, что это action="javascript:void(0);"хорошо работает.
Dutchie432
Ответ голландцев работает отлично. Firefox просто обновлял страницу.
IAmGroot 06
1
@ Dutchie432 должен превратить это в ответ, а не в комментарий. Затем он доберется до вершины, где ему и место. В качестве альтернативы, KPrime мог бы скорректировать свой ответ, поскольку пропуск действия для меня не сработал ...
sage
212

Вы захотите включить action="javascript:void(0);"в свою форму, чтобы предотвратить перезагрузку страницы и поддерживать стандарт HTML.

Голландцы432
источник
4
Просто потратил 2 дня, пытаясь подавить действие по умолчанию кнопки отправки при нажатии ввода, потому что, хотя действие имело место, страница в конечном итоге перезагрузилась (Firefox). Добавление javascript void в качестве действия в форме исправило это. Спасибо за это.
Тони Пейн
спасибо за этот дополнительный ответ. это по-прежнему работает - но остается ли это «современным» решением в 2016 году?
low_rents
1
@low_rents Я до сих пор использую его постоянно и лично не нашел лучшего решения.
Dutchie432
1
Спасибо за точное и отличное решение для решения проблемы перезагрузки страницы при нажатии клавиши ввода :) Лучшее решение.
Имран Рафик Скорее
9

Просто добавьте это событие в текстовое поле. Это предотвратит отправку при нажатии Enter, и вы можете добавить кнопку отправки или вызвать form.submit () по мере необходимости:

onKeyPress="if (event.which == 13) return false;"

Например:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
GenericMeatUnit
источник
1
Спасибо вам за это. Боюсь, ясность вашего ответа прояснила мне правильность предыдущего ответа, поэтому вы не получите принятый ответ, но вы получите мою благодарность и положительный голос!
Мэтт Робертс,
2
Спасибо. Рад помочь. В любом случае я никогда не был в центре внимания. ;)
GenericMeatUnit 04
5

Когда вы нажимаете ввод в форме, естественным поведением формы является отправка, чтобы остановить это поведение, которое не является естественным, вы должны предотвратить его отправку (поведение по умолчанию) с помощью jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})
jsDevia
источник
4

идея:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

и

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>
Том Ноблман
источник
1

Два способа решения:

  1. значение действия формы - "javascript: void (0);".
  2. добавить прослушиватель событий нажатия клавиш для формы, чтобы предотвратить отправку.
законопроект
источник
Прослушивание события нажатия клавиши (например, клавиши ввода) может вызвать проблемы с textareas и, возможно, выбрать автозаполнение или раскрывающиеся списки, а мобильный телефон может быть еще одним источником проблем.
luckydonald
0

Первый ответ - лучшее решение:

Добавьте в форму обработчик onsubmit (через простой js или jquery $ (). Submit (fn)) и верните false, если не выполняются ваши конкретные условия.

Более конкретно с jquery:

$('#your-form-id').submit(function(){return false;});

Если вы не хотите, чтобы форма отправлялась, когда-либо - в этом случае почему бы просто не пропустить атрибут «действие» в элементе формы?

Написание расширений Chrome - это пример того, где у вас может быть форма для ввода данных пользователем, но вы не хотите ее отправлять. Если вы используете action = "javascript: void (0);", код, вероятно, будет работать, но вы столкнетесь с этой проблемой, когда вы получите ошибку о запуске встроенного Javascript.

Если вы полностью пропустите действие, форма перезагрузится, что также нежелательно в некоторых случаях при написании расширения Chrome. Или если у вас есть веб-страница со встроенным калькулятором, где пользователь вводит данные и нажимает «Рассчитать» или что-то в этом роде.

Скеллиам
источник