PHP Calculator - Show results on page and in Ajax Popup

Question

UPDATE - this was solved by adding $('.popup-with-form').magnificPopup('open'); to the StateChanged function in the JS. Thanks to @Bollis.

Original Question:

I have a simple calculator here: http://www.roofingcalculator.org/popup/popup.htm

when click on "Calculate" button, i need results to be displayed on that page AND initiate Ajax Popup ( Magnific inline) with results displayed in popup as well.

Question: How do i make it so that pressing "calculate" button would both of these at the same time:

1) display results on page

2) Launch pupup with results of calculator

Right now, to show Popup, user needs to click on the link "Open Form".

If you open popup AND don't click "calculte" button, no results are displayed.

If you click Calculate first and then open popup, results are shown on both the page and in popup (see image).

The two things that initiate popup are:

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

If i add class="popup-with-form" and href="#test-form" to the Calculate button, it launches popup, but no calculation is done.

All codes for calculator (JS / PHP) can be seen here .

Here is AJAX code that opens popup (i think)

$(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

Try adding onsubmit="openPopupFunctionHere()" to your form tag. The onsubmit event will be triggered whenever the form should submit, which happens when you press the "Calculate" button.