Javascript 我可以让 <button> 不提交表单吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3314989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I make a <button> not submit a form?
提问by alex
I've got a form, with 2 buttons
我有一个表格，有 2 个按钮
<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>
I use jQuery UI's button on them too, simply like this
我也在它们上面使用 jQuery UI 的按钮，就像这样
$('button').button();
However, the first button also submits the form. I would have thought that if it didn't have the type="submit", it wouldn't.
但是，第一个按钮也会提交表单。我会认为如果它没有type="submit"，它就不会。
Obviously I could do this
显然我可以做到这一点
$('button[type!=submit]').click(function(event) { event.stopPropagation(); });
But is there a way I can stop that back button from submitting the form without JavaScript intervention?
但是有没有一种方法可以阻止后退按钮在没有 JavaScript 干预的情况下提交表单？
To be honest, I used a button only so I could style it with jQuery UI. I tried calling button()on the link and it didn't work as expected (looked quite ugly!).
老实说，我只使用了一个按钮，所以我可以用 jQuery UI 来设计它。我尝试调用button()链接，但它没有按预期工作（看起来很丑！）。
回答by Josh Lee
The default value for the typeattribute of buttonelementsis"submit". Set it to type="button"to produce a button that doesn't submit the form.
元素type属性button的默认值是“提交”。将其设置type="button"为生成不提交表单的按钮。
<button type="button">Submit</button>
In the words of the HTML Standard: "Does nothing."
用HTML 标准的话来说：“什么都不做”。
回答by s4y
The buttonelementhas a default type of submit.
该button元素的默认类型为submit。
You can make it do nothing by setting a type of button:
您可以通过设置以下类型使其不执行任何操作button：
<button type="button">Cancel changes</button>
回答by Jeffrey Blake
Just use good old HTML:
只需使用良好的旧 HTML：
<input type="button" value="Submit" />
Wrap it as the subject of a link, if you so desire:
如果您愿意，请将其包装为链接的主题：
<a href="http://somewhere.com"><input type="button" value="Submit" /></a>
Or if you decide you want javascript to provide some other functionality:
或者，如果您决定希望 javascript 提供一些其他功能：
<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
回答by zzjove
<form onsubmit="return false;">
...
</form>
回答by TCCV
Honestly, I like the other answers. Easy and no need to get into JS. But I noticed that you were asking about jQuery. So for the sake of completeness, in jQuery if you return false with the .click() handler, it will negate the default action of the widget.
老实说，我喜欢其他答案。简单，无需进入JS。但我注意到你问的是 jQuery。因此，为了完整起见，在 jQuery 中，如果您使用 .click() 处理程序返回 false，它将否定小部件的默认操作。
See here for an example(and more goodies, too). Here's the documentation, too.
in a nutshell, with your sample code, do this:
简而言之，使用您的示例代码，请执行以下操作：
<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>
As an added benefit, with this, you can get rid of the anchor tag and just use the button.
作为一个额外的好处，有了这个，您可以摆脱锚标记而只使用按钮。
回答by DennisVM-D2i
Without setting the typeattribute, you could also return falsefrom your OnClickhandler, and declare the onclickattribute as onclick="return onBtnClick(event)".
如果不设置type属性，您也可以false从OnClick处理程序返回，并将onclick属性声明为onclick="return onBtnClick(event)".
回答by githaiga geoffrey
Yes, you can make a button not submit a form by adding an attribute of type of value button:
<button type="button"><button>
是的，您可以通过添加值按钮类型的属性使按钮不提交表单：
<button type="button"><button>
回答by Andrew
<form class="form-horizontal" method="post">
<div class="control-group">
<input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
</div>
<div class="control-group">
<input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
</div>
<div class="control-group">
<input type="text" class="span1" name="unit" id="inputPassword" required>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Semester</label>
<div class="controls">
<select name="semester">
<option></option>
<option>1st</option>
<option>2nd</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Deskripsi</label>
<div class="controls">
<textarea name="description" id="ckeditor_full"></textarea>
<script>CKEDITOR.replace('ckeditor_full');</script>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
</div>
</div>
</form>
<?php
if (isset($_POST['save'])){
$subject_code = $_POST['subject_code'];
$title = $_POST['title'];
$unit = $_POST['unit'];
$description = $_POST['description'];
$semester = $_POST['semester'];
$query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
$count = mysql_num_rows($query);
if ($count > 0){ ?>
<script>
alert('Data Sudah Ada');
</script>
<?php
}else{
mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());
mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());
?>
<script>
window.location = "subjects.php";
</script>
<?php
}
}
?>
