我有一个表格,有 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()
,但它没有按预期工作(看起来很丑!)。
<button type="button">
表示不提交表单的那一个,使用 <input type="submit">
表示另一个。然后用 jquery $('#formID').submit(function(e){});
捕捉它
type
attribute of button
elements 的默认值为“提交”。将其设置为 type="button"
以生成不提交表单的按钮。
<button type="button">Submit</button>
用 HTML Standard 的话来说:“什么都不做。”
The button
element 的默认类型为 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" />
Button
是 HTML 中的容器。这使您可以放置图像或表格(不确定为什么要这样做,但可以)等,而 input
不支持。两者之间存在差异,并且每个都有其适当的用例。
是的,您可以通过添加值按钮类型的属性来使按钮不提交表单:
<button type="button"><button>
<form onsubmit="return false;">
...
</form>
老实说,我喜欢其他答案。简单,无需进入 JS。但我注意到你问的是关于 jQuery 的问题。因此,为了完整起见,在 jQuery 中,如果您使用 .click() 处理程序返回 false,它将否定小部件的默认操作。
See here for an example(还有更多好东西)。 Here's the documentation, too。
简而言之,使用您的示例代码,执行以下操作:
<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()
并不会停止提交(它以 function(e)
开头)。
如果不设置 type
属性,您也可以从 OnClick
处理程序返回 false
,并将 onclick
属性声明为 onclick="return onBtnClick(event)"
。
<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
}
}
?>
<input type=text>
将在您按 Enter 时提交表单