表格上的灯箱提交 [英] Lightbox on form submit

问题描述

我正在开发一个电子商务网站，我希望添加到购物车按钮打开一个带有表单的灯箱，以接受更多细节，如数量等。
问题是，框架的方式是实现后，添加到购物车按钮本身是提交到包含上述表单的页面的表单的一部分。那么，我如何获得添加到购物车按钮以在灯箱中加载下一个表单？

I am working on an ecommerce site for which, i want the add to cart button to open a lightbox with a form to accept some more details like quantity, etc. The problem is, the way the framework is implemented, the add to cart button itself is part of a form that submits to the page that contains the above mentioned form. So, how do i get the add to cart button to load the next form in a lightbox?

推荐答案

只需附加一个点击处理程序在提交表单的按钮上，如下所示：

Just attach a click handler onto the button that submits the form, like so:

$("#id_of_submit_button").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

});

这将使表格不被提交（或至少应该提交）。至于打开灯箱，你应该能够在上面的 e.stopPropagation（）; 之后调用它......只需正常打开它。

That will keep the form from being submitted (or at least, it should). As for opening the lightbox, you should be able to just include that after the e.stopPropagation(); call above...just open it as normal.

您可能遇到的主要问题是如何将其他表格中的信息与原始表格一起包含在灯箱中。您可能只想通过 $。post 调用提交所有内容，或者执行一些 $（form）。append（）调用根据灯箱中的信息将隐藏字段插入原始表单？

The major problem you are probably going to have is how to include the information from the additional form in the lightbox with the original form. You may just want to submit all of it via a $.post call, or perhaps do some $("form").append() calls to insert hidden fields into the original form based on the information in the lightbox?

这篇关于表格上的灯箱提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！