Могу ли я заставить <кнопку> не отправлять форму?

340

У меня есть форма с двумя кнопками

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

Я использую кнопку JQuery UI на них, просто как это

$('button').button();

Однако первая кнопка также отправляет форму. Я бы подумал, что если бы у него не было type="submit", это не так.

Очевидно, я мог бы сделать это

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

Но есть ли способ, которым я могу остановить эту кнопку возврата от отправки формы без вмешательства JavaScript?

Честно говоря, я использовал кнопку только для того, чтобы я мог стилизовать ее с помощью jQuery UI. Я попробовал позвонить button() по ссылке, и он не работал должным образом (выглядел довольно уродливо!).

  • 0
    Возможно дублирование кнопки HTML, чтобы НЕ отправить форму
  • 0
    используйте <button type="button"> для того, кто не отправляет форму, и <input type="submit"> для другого. Затем поймайте его с помощью jquery $('#formID').submit(function(e){});
Теги:
button

5 ответов

749
Лучший ответ

Значение по умолчанию для атрибута type элементов button - это "отправить".

<button type=button>Submit</button>
Поделиться
  • 13
    Согласно w3schools, это не так для IE .
  • 10
    @ R0MANARMY: Да, в IE <8 button является type по умолчанию ...
Показать ещё 7 комментариев
187

Элемент button имеет тип submit по умолчанию.

Вы можете заставить его ничего не делать, установив тип button:

<button type="button">Cancel changes</button>
Поделиться
  • 0
    Можно ли это сделать в коде на стороне сервера (C #)?
  • 1
    @ B.ClayShannon Не совсем. Вы можете использовать серверный код для возврата той же страницы при нажатии кнопки, но она все равно перезагрузит страницу. В конечном итоге кнопка является частью документа, поэтому единственным способом сообщить браузеру, как вы хотите, чтобы она действовала, являются HTML и JavaScript.
9

Просто используйте старый добрый HTML:

<input type="button" value="Submit" />

Оберните его как объект ссылки, если хотите:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Или, если вы решите, что хотите, чтобы javascript предоставлял некоторые другие функции:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
Поделиться
  • 6
    Использование стандартного кнопочного элемента управления с надлежащим атрибутом типа - это «старый добрый html», что создает намного более простую разметку.
  • 0
    Это явно не проще, если в некоторых браузерах используется тип отправки по умолчанию, а в других - кнопка по умолчанию. Черт, даже просто наличие типа отправки по умолчанию усложняет вещи больше, чем это необходимо для IMO. Должна быть разметка, которая легко предоставляет кнопку, которая ничего не делает. И есть: <input type="button" />
Показать ещё 10 комментариев
3

Честно говоря, мне нравятся другие ответы. Легко и не нужно входить в JS. Но я заметил, что вы спрашивали о jQuery. Итак, для полноты, в jQuery, если вы вернете false с обработчиком .click(), это будет отрицать действие виджета по умолчанию.

См. здесь пример (и многое другое). Здесь также документация.

в двух словах, с вашим примером кода, сделайте следующее:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

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

Поделиться
  • 0
    Любопытно, что добавление e.preventDefault() ничего не делает, чтобы остановить e.preventDefault() где она начинается с function(e) ).
2 
<form onsubmit="return false;">
   ....
</form>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню