У меня есть форма с двумя кнопками
<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()
по ссылке, и он не работал должным образом (выглядел довольно уродливо!).
Значение по умолчанию для атрибута type
элементов button
- это "отправить".
<button type=button>Submit</button>
button
является type
по умолчанию ...
Элемент button
имеет тип submit
по умолчанию.
Вы можете заставить его ничего не делать, установив тип button
:
<button type="button">Cancel changes</button>
Просто используйте старый добрый 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();"/>
<input type="button" />
Честно говоря, мне нравятся другие ответы. Легко и не нужно входить в 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>
В качестве дополнительного преимущества, с этим вы можете избавиться от тега привязки и просто использовать кнопку.
e.preventDefault()
ничего не делает, чтобы остановить e.preventDefault()
где она начинается с function(e)
).
<form onsubmit="return false;">
....
</form>
<button type="button">
для того, кто не отправляет форму, и<input type="submit">
для другого. Затем поймайте его с помощью jquery$('#formID').submit(function(e){});