PHP计算器-在页面和Ajax弹出窗口中显示结果

Question

更新-这通过添加$('.popup-with-form').magnificPopup('open'); 到JS中的StateChanged函数。 感谢@Bollis。

原始问题：

我在这里有一个简单的计算器： http : //www.roofingcalculator.org/popup/popup.htm

当单击“计算”按钮时，我需要在该页面上显示结果并启动Ajax Popup（ Magnific inline），结果也显示在弹出窗口中。

问题：如何做到这一点，以便同时按下“计算”按钮，这两个都可以：

1）在页面上显示结果

2）启动带有计算器结果的pupup

现在，要显示弹出窗口，用户需要单击链接“打开表单”。

如果打开弹出窗口且未单击“计算”按钮，则不会显示任何结果。

如果先单击“计算”，然后打开弹出窗口，则结果将同时显示在页面和弹出窗口中（参见图片）。

启动弹出窗口的两件事是：

<a class="popup-with-form" href="#test-form">

如果我将class =“ popup-with-form”和href =“＃test-form”添加到Calculate按钮，它将启动弹出窗口，但不执行任何计算。

可以在此处查看所有计算器代码（JS / PHP）。

这是打开弹出窗口的AJAX代码（我认为）

$(document).ready(function() {
    $('.popup-with-form').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#name',

        // When elemened is focused, some mobile browsers in some cases zoom in
        // It looks not nice, so we disable it:
        callbacks: {
            beforeOpen: function() {
                if($(window).width() < 700) {
                    this.st.focus = false;
                } else {
                    this.st.focus = '#name';
                }
            }
        }
    });
});

Answer 1

尝试将onsubmit="openPopupFunctionHere()"到form标签中。 只要提交表单，就会触发onsubmit事件，当您按下“计算”按钮时就会发生。