表單提交，限制提交按鈕只

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>將作爲提交按鈕行動刪除。

嘗試，

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

Answer 3

您可以添加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 4

使用HTML輸入提交

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

Answer 5

試試這個

按鈕像<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 6

需要事件處理程序應用到按鈕本身不是整個形式

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

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

return false; 
});