it-swarm.com.ru

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

У меня есть форма с 2 кнопками

<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() по ссылке, и она не сработала, как ожидалось (выглядела довольно некрасиво!).

451
alex

Значение по умолчанию для атрибута type ЭЛЕМЕНТОВ button "submit". Установите значение type=button, чтобы создать кнопку, которая не отправляет форму.

<button type=button>Submit</button>

В словах стандарта HTML: "Ничего не делает".

966
Josh Lee

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

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

<button type="button">Cancel changes</button>
219
s4y

Просто используйте старый добрый 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();"/>
17
Jeffrey Blake
<form onsubmit="return false;">
   ...
</form>
6
zzjove

Честно говоря, мне нравятся другие ответы. Легко и не нужно входить в 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>

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

5
TCCV

Без установки атрибута type вы также можете вернуть false из вашего обработчика OnClick и объявить атрибут onclick как onclick="return onBtnClick(event)".

0
DennisVM-D2i