0

我有一个基本的表单弹出窗口，当使用以下代码单击主要产品的“立即购买”按钮时将显示该弹出窗口：onclick="productAddToCartForm.submit(this)"

而且我在同一页面中也有相关产品，该主产品具有完全相同的按钮，我希望在单击它时也显示此弹出窗口，我也尝试添加onclick="productAddToCartForm.submit(this)"它，但如果我按下它，弹出窗口将起作用，但会将两种产品都添加到购物车中。

我怎样才能做到这一点？

代码如下所示：

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

1 回答 1

0

从您的示例中可以看出，您的问题的根源是您两次调用表单提交函数。当您将其粘贴到此处时，第二个 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);
    });
});

其次，没有理由包装jQuery.ajaxa try catch，它有自己的错误处理功能。除非你认为 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 论坛，了解如何使用这些应用程序或进行培训。否则，如果您的表单由于糟糕的编程实践而混乱，您将失去客户、收到不正确的订单，或者可能被起诉或逮捕（取决于您是否正在处理信用卡）。有许多网站，您可以聘请自由职业者以非常低的成本完成您需要的工作，并避免麻烦。

于 2014-02-07T05:12:13.390 回答