我可以做一个<钮扣>没有提交表单?

我有一个表单,有两个按钮

<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(),它没有像预期的那样工作(看起来很难看!)

437358 次浏览

使用传统的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();"/>

默认值为#EYZ1元素的type属性 “提交”。将其设置为type="button"以生成一个不提交表单的按钮。

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

HTML标准的话说:“什么都不做。”

button元素的默认类型是submit

你可以通过设置button类型来让它什么都不做:

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

说实话,我喜欢其他答案。简单,不需要进入JS。但是我注意到你在问jQuery。因此,为了完整起见,在jQuery中,如果您使用.click()处理程序返回false,它将否定小部件的默认操作。

请看这里的例子(以及更多的好东西)。# EYZ1。

简单地说,在你的示例代码中,这样做:

<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>

作为一个额外的好处,有了这个,你可以摆脱锚标记,只使用按钮。

<form onsubmit="return false;">
...
</form>
  <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
}
}


?>

如果不设置type属性,您也可以从OnClick处理程序返回false,并将onclick属性声明为onclick="return onBtnClick(event)"

是的,你可以通过添加type of value button属性使按钮不提交表单:

<button type="button"><button>