jQuery的提交兩個按鈕

Question

我有一個基本的形式彈出窗口，顯示當按鈕現在購買的主要產品的點擊與此代碼：onclick="productAddToCartForm.submit(this)"

和我有太多的相關產品在同一個頁面與該主產品具有完全相同的按鈕，並且我希望這個彈出窗口在被點擊時也能夠顯示，並且我也嘗試將onclick="productAddToCartForm.submit(this)"添加到它，但是如果我將它彈出，彈出窗口會起作用，但會將兩個產品添加到CART中。

我該怎麼做？

的代碼如下所示：

<div style="display: none;" id="ajax-popup"> 
    <span class="button b-close"><span>X</span></span> 
    <h2 id="ajax-popup-message"></h2> 
    <div id="ajax-popup-content"></div> 
</div> 
<script type="text/javascript"> 
//<![CDATA[ 
    var productAddToCartForm = new VarienForm('product_addtocart_form'); 
    productAddToCartForm.submit = function(button, url) { 
    if (this.validator.validate()) { 
     var form = this.form; 
     var oldUrl = form.action; 
     if (url) { 
      form.action = url; 
     } 
     var e = null; 
     // Start of our new ajax code 
     if (!url) { 
      url = jQuery('#product_addtocart_form').attr('action'); 
     } 
     url = url.replace("checkout/cart","ajax/index"); // New Code 
     var data = jQuery('#product_addtocart_form').serialize(); 
     data += '&isAjax=1'; 
     jQuery('#ajax_loader').show(); 
     try { 
      jQuery.ajax({ 
       url : url, 
       dataType : 'json', 
       type : 'post', 
       data : data, 
       success : function(data) { 
        jQuery('#ajax_loader').hide(); 
        //alert(data.status + ": " + data.message); 

        jQuery('#ajax-popup-message').addClass(data.status); 

        if(jQuery('#ajax-popup')){ 
         jQuery('#ajax-popup-message').html(data.message); 
        } 
        if(jQuery('#ajax-popup')){ 
         jQuery('#ajax-popup-content').html(data.sidebar); 
        } 
        if(jQuery('.header .links')){ 
         jQuery('.header .links').replaceWith(data.toplink); 
        } 

        jQuery('#ajax-popup').bPopup(); 
       } 
      }); 
     } catch (e) { 
     } 
     // End of our new ajax code 
     this.form.action = oldUrl; 
     if (e) { 
      throw e; 
     } 
    } 
}.bind(productAddToCartForm); 

    productAddToCartForm.submitLight = function(button, url){ 
     if(this.validator) { 
      var nv = Validation.methods; 
      delete Validation.methods['required-entry']; 
      delete Validation.methods['validate-one-required']; 
      delete Validation.methods['validate-one-required-by-name']; 
      // Remove custom datetime validators 
      for (var methodName in Validation.methods) { 
       if (methodName.match(/^validate-datetime-.*/i)) { 
        delete Validation.methods[methodName]; 
       } 
      } 

      if (this.validator.validate()) { 
       if (url) { 
        this.form.action = url; 
       } 
       this.form.submit(); 
      } 
      Object.extend(Validation.methods, nv); 
     } 
    }.bind(productAddToCartForm); 
//]]> 
</script> 

HTML看起來像這樣：

<div class="main"> 
<div class="first"> 
<div class="add-to-cart"> 
<img onclick="productAddToCartForm.submit(this)" title="Add to Cart" src="../images/add-to-cart.png"> 
</div></div> 
//STUFF 
<div class="second"> 
<button onclick="window.location='URL'; productAddToCartForm.submit(this)" class="form-button add-to-cart" type="button"></button></div> 
</div> 

Answer 1

您的問題的根源是，從我可以從你的例子中看到，您呼叫表單提交功能兩次。看起來，第二個onclick有一個調試代碼，其中包含window.location，當它粘貼在這裏時，其中的內容是，我只能從您的描述中確定，彈出窗口標記導致無限循環的提交項目大車。

首先，您正在使用jQuery使JavaScript編程變得更容易，擺脫HTML中的onclick = DHTML事件並使用jQuery。 再加入

jQuery(document).ready(function(){ 
    jQuery('.add-to-cart').click(function(e){ 
     e.preventDefault(); 
     productAddToCartForm.submit(this); 
    }); 
}); 

其次，我們沒有理由在try catch包裹jQuery.ajax，它有它自己的錯誤處理功能。除非你相信jQuery的ajax函數會有什麼問題。否則，如果您嘗試在成功方法中捕獲錯誤，則需要將代碼放入成功方法中。

把ajax想象成一個完全獨立的瀏覽器，在它被執行的瞬間被打開。

這裏是什麼，我指的是一個例子：http://jsfiddle.net/73gpC/1/

下面是一個錯誤方法的例子：

jQuery.ajax({ 
    error: function(jqXHR, text, errorThrown){ 
     if(errorThrown){ 
      alert('Error: ' + errorThrown); 
     } 
    } 
}); 

下一頁您已經聲明的形式var form = this.form;，爲什麼搜索DOM它再次？ jQuery('#product_addtocart_form').serialize(); 應該form.serialize();

每次執行jQuery('selector')，jQuery的 「搜索」 爲DOM中的元素。

儘管起初聽起來不錯，但當您開始處理更復雜的應用程序時，用戶與應用程序進行交互時以這種方式執行操作的速度非常慢。 因爲您已經找到它，所以使用聲明變量要快得多。由於這種說法總是傾向於ID超過類名，因爲它們要快得多，但需要有效的HTML（ID是唯一的，不能被重用）。

從它<button onclick="window.location='URL'; productAddToCartForm.submit(this)"的外觀僅僅是徹底打破和你期望它做一些它根本不會因爲window.location='URL'會重定向用戶的瀏覽器爲「URL」，當他們點擊和productAddToCartForm.submit(this)永遠不會執行。

例子：http://jsfiddle.net/CZqDL/

沒有警報框將顯示在點擊，表示從來沒有發射的功能。

我全力幫助別人學習如何解決問題，但這實際上超出了使用Javascript或jQuery的經驗水平。 我建議購買一本jQuery編程書或聘請開發人員對其進行正確編程。 特別注意VarienForm如何成爲Magento的一部分，它應該在您的標籤中列出，這是一個電子商務應用程序。

如果你只是在學習，我建議在jQuery或Magento論壇上討論如何使用應用程序或可能用於培訓。 否則，如果您的表單由於糟糕的編程習慣而弄糟了，您將失去客戶，獲得不正確的訂單，或者可能被起訴或被捕（取決於您是否在處理信用卡）。 有許多網站，你可以聘請一名自由職業者來做你所需要的非常低的成本，避免麻煩。