Question

我抓住我的表格提交：

$('#my-form').submit(function(e){
 //do stuff

这是我的HTML

<div class="row">
       <div class="columns">
            <button type="submit" class="small right">Save</button>
       </div>
</div>

另外在我的表格中还有其他用于删除图像的按钮：

<button class="tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

问题是，这些图像按钮提交了表单，我该如何阻止它？

Answer 1

<强>选项1：

检查

HTML button to NOT submit form

Difference between <input type='button' /> and <input type='submit' />

选项2：解决方法

您需要为其他按钮preventDefault()执行

假设你正在使用如下的ajax调用删除

$('.tiny btn-caption').click(function(e){

  e.preventDefault(); // it will cancel the default form submission behavior

  $.post({
   //Ajax stuff for deleting goes here
  });
});

Answer 2

试试这个

<button>Click to do something</button>之类的按钮是提交按钮。

添加type="button"会限制表单提交

<button type="button" class="tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

Answer 3

默认情况下，<button>将充当提交按钮。

尝试，

$("#my-form button[type!='submit']").click(function(e){
  e.preventDefault();
});

Answer 4

您可以为删除图像并阻止其操作的按钮添加remove类：

<button class="remove tiny btn-caption" data-reveal-id="caption-modal">
    <i class="fa fa-bars fa-2x"></i>
</button>

JS：

$('#my-form .remove').click(function(){
  // post another form or call ajax method
  return false;
});

Answer 5

您需要将事件处理程序应用于按钮本身而不是整个表单

$('#my_form button').click(function(){
//or 
$('.tiny btn-caption, .small').click(function(){

 $.post(url,dataString,function(response){
    //handle resposne
  });

 return false;
});

Answer 6

使用html输入提交

<input type="submit" value="Submit">

提交表单，限制仅提交按钮

6 个答案: