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);
    });
});

其次，没有理由将jQuery.ajax包裹在try catch中，它有自己的错误处理功能。除非你相信jQuery的ajax函数会出错。否则，如果您尝试在success方法中捕获错误，则需要将代码放在success方法中。

将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＆＃34;搜索＆＃34;对于DOM中的元素。

虽然一开始听起来不错，但是当您开始处理更复杂的应用程序时，当用户与您的应用程序交互时，以这种方式执行操作的速度非常慢。由于您已经找到它，因此使用声明的变量要快得多。据说这总是有利于ID对类名，因为它们要快得多，但需要有效的HTML（ID是唯一的，不能重复使用）。

从它的外观来看，<button onclick="window.location='URL'; productAddToCartForm.submit(this)"完全被破坏了，你希望它能做一些简单的胜利，因为window.location='URL'会将用户浏览器重定向到＆＃39; URL＆＃39;当他们点击它时，productAddToCartForm.submit(this)永远不会执行。

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

点击时不会显示任何警告框，表示该函数从未触发过。

如果我能够帮助别人学习如何找出问题，我就是全力以赴，但这通常超出了你使用Javascript或jQuery的经验水平。我建议获取一本jQuery编程书或雇用开发人员来正确编程。特别是看看VarienForm是如何成为Magento的一部分，它应该在您的标签中列出，这是一个电子商务应用程序。

如果您只是在学习，我建议您参与jQuery或Magento论坛，了解如何使用这些应用程序或可能进行培训。否则，如果您的表格因编程不当而导致表格陷入困境，您将失去客户，获得错误的订单，或者可能被起诉或被捕（取决于您是否正在处理信用卡）。在许多网站上，您可以聘请自由职业者以非常低的成本完成您所需的工作并避免麻烦。

jQuery提交两个按钮

1 个答案: