Display PHP output in Ajax Popup

Question

Hi All! So I'm a noob, and most of my code was done by a programmer for me. I can't get him to help me now.

I have a calculator that displays results (produced by calc.php) without relaoding the page. Demo is here: http://www.roofingcalculator.org/popup/popup.htm

Now I added Ajax popup (contact form) from here: http://dimsemenov.com/plugins/magnific-popup/ and it works.

What I want is to display the results of calc.php inside the Popop, but it does not work.

Details:

When user clicks "Calculate" button, the form sends info to CALC.JS using POST, which then sends info to CALC.PHP and diplays results back on the page with this tag:

<span id="CalcSum">Results:</span>

When I add the SPAN tag to popup, it does not display the result of PHP.

QUESTION How do I display results in AJAX Popup??

Please help - I really appreciate any help - Cheers!

Calc.js content:

var XmlHttp;
function GetXmlHttpObject() {
   var XmlHttp = null;
   try {
      XmlHttp = new XMLHttpRequest();
   } catch (e) {
      try {
         XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   return XmlHttp;
}
function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
   }
}
function ShowSum(url, params) {
   XmlHttp = GetXmlHttpObject();
   if (XmlHttp == null)
      return;
   XmlHttp.onreadystatechange = StateChanged; 
   XmlHttp.open('POST', url, true);
   XmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   XmlHttp.setRequestHeader("Content-length", params.length);
   XmlHttp.setRequestHeader("Connection", "close");
   XmlHttp.send(params);
}

function GetInfo() {var str = 
"size1=" + escape(encodeURI(document.getElementById("size1").value)) +
"&size2=" + escape(encodeURI(document.getElementById("size2").value));

ShowSum('http://www.website.com/calc.php', str);
}

calc.php

<?php
$size1_val    = empty($_POST['size1'])      ? '0'       : $_POST['size1'];
$size2_val    = empty($_POST['size2'])      ? '0'       : $_POST['size2'];
$total_size = $size1_val * $size2_val;
print "Result: ". round($total_size). "";
?>

HTML Form:

<table>
<script type="text/javascript" src="calc.js"></script>
<form id="formcalc" action="javascript:GetInfo();" accept-charset="UNKNOWN" 
enctype="application/x-www-form-urlencoded" method="post">
<tr>
<td height="24" ><strong>Sizes:</strong>
</td>
<td height="24" valign="top" width="50%">
<input id="size2"/> x <input id="size1" s/> ft.
</td>
</tr>
<tr>
<td COLSPAN="2">
<input name="calc" type="submit" value="Calculate" />

<span id="CalcSum">Results:</span>
</form>
</td>
</tr>
</table>

Answer 1

Add $('.popup-with-form').magnificPopup('open'); to your stateChanged function as below. Works for me on your example. Changed both results spans and opens the pop up.

function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
       $('.popup-with-form').magnificPopup('open');
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
      document.getElementById("CalcSumPopup").innerHTML = XmlHttp.responseText;
   }
}

Update: more documentation here http://dimsemenov.com/plugins/magnific-popup/documentation.html if you need it.

Answer 2

Is the html for the Ajax popup on the same page as the form? If so, add

<span id="CalcSumPopup">Results:</span>

to the popup where you want the result to go and add

document.getElementById("CalcSumPopup").innerHTML = XmlHttp.responseText;

after document.getElementById("CalcSum").innerHTML = XmlHttp.responseText; in Calc.js.

If it is not on the same page this will not work.

EDIT: This works because id's are meant to be unique. getElementById will find the first occurrence of the specified id and then stop, so if you want multiple places to be changed you need to give them unique id's.