2014-11-03 212 views
1

我有一個網上商店,用戶可以通過一個按鈕將產品添加到那裏購物車,因此他們留在目錄頁面(所有產品都列出)。我通過使用jQuery和ajax來做到這一點。奇怪的是,當我按下按鈕時,所有表單都會被提交。這不是我想要的!防止jQuery post請求觸發多次

$(function() { 
    $('form').submit(function (event) { 
     event.preventDefault(); 

     var $form = $(this), 
      formdata = $form.serialize(), 
      url = $form.attr('action'); 

     $.post(url, formdata); 
    }); 
}); 

我明白我不能使用一個類這一點,因爲這將提交所有這些,但IDS是沒有用的,因爲我可以有50多個產品在頁面上,這將是一個很大的重複工作。

那麼有沒有解決方案呢?

在此先感謝

+1

這看起來不錯...有你的代碼 – 2014-11-03 10:04:02

+0

檢查一些其他的問題,你的網頁/表單上的其他環節中加入onclick =「返回false」停止頁面重新加載/後。 – SilentTremor 2014-11-03 10:06:09

+0

這聽起來像您的網頁上的每個產品都有一個

,這將是處理此問題的一種不尋常的方式。你應該可以在你的'添加'按鈕中添加一個onclick處理函數,它會調用一個函數傳遞你想添加的產品的Id。然後你可以使用這個函數來進行Ajax調用。 – Alan 2014-11-03 10:11:40

回答

1

您展示應該孤立工作的代碼,所以無論你的代碼沒有被擊中(由於該網頁上的錯誤),或者沒有連接每到 - 產品形式(例如,如果他們也動態加載)。

如果表格動態加載,因爲我懷疑他們可能是,那麼你需要使用委派的事件處理程序,貼的形式非變化,祖先(document是默認值)

例如:

$(function() { 
    $(document).on('submit', 'form', function (event) { 
     event.preventDefault(); 

     var $form = $(this), 
      formdata = $form.serialize(), 
      url = $form.attr('action'); 

     $.post(url, formdata); 
    }); 
}); 

它的工作原理是偵聽submit事件冒泡的祖先,然後適用 jQuery的form選擇,然後將該函數應用於導致該事件的任何匹配元素,因此將對添加到該頁面的表單進行動態處理。

如果情況並非如此,請提供代碼的其餘部分以及頁面HTML的示例(從瀏覽器保存爲非源代碼)。

+0

是的,我需要那個!感謝:D – bobbybouwmann 2014-11-03 11:05:06

0

當你建立你的產品列表,你可以將屬性添加到每個按鈕。像這樣的東西應該工作:

<button data-productid='ABC123' onclick='addToCart(this)'>Add</button> 

<script> 
    function addToCart(btn) { 
     var productId = $(btn).data('productid'); 
     // do ajax call, using productid 
    } 
</script> 
0

我想你只需要另一個參數,例如當前產品的ID爲。所以,你就可以這樣做:

$(function() { 
    $('.add-cart-form').submit(function (event) { 
     event.preventDefault(); 

     var $form = $(this), 
      productId = $(this).attr('data-product-id'), // Assuming you add the ID in your view 
      formdata = $form.serialize() + '&productId=' + productID, 
      url = $form.attr('action'); 

     $.post(url, formdata); 
    }); 
}); 

然後,你必須檢索產品ID參數,只會返回當前的產品。