大家好！所以，我是小白，以及我的大多数code是由程序员为我做的。我不能让他帮我。的

我有一个显示结果（通过calc.php生产）不relaoding页面计算器。 演示是在这里： http://www.roofingcalculator.org/popup/popup.htm

现在我添加了Ajax弹出（联系表）从这里： http://dimsemenov.com/plugins /荡气回肠 - 弹出/ 和它的作品。

我要的是显示calc.php的POPOP内的​​结果，但它不能正常工作。

详细信息：

当用户点击计算按钮，表格发送信息使用POST，然后发送信息给CALC.PHP和diplays结果返回页面上有该标签CALC.JS：

 ＆LT;跨度ID =CalcSum＆GT;结果：筛; / SPAN＆GT;
 

当我添加SPAN标签弹出，它不会显示PHP的结果。

问在AJAX弹出如何显示的结果？

请帮助 - 我真的AP preciate任何帮助 - 干杯

Calc.js内容：

  VAR XMLHTTP;
传播GetXmlHttpObject（）{
   VAR XMLHTTP = NULL;
   尝试 {
      XMLHTTP =新XMLHtt prequest（）;
   }赶上（五）{
      尝试 {
         XMLHTTP =新的ActiveXObject（MSXML2.XMLHTTP）;
      }赶上（五）{
         XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
      }
   }
   返回XMLHTTP;
}
传播StateChanged（）{
   如果（XmlHttp.readyState == 4 || XmlHttp.readyState ==完成）{
      的document.getElementById（CalcSum）的innerHTML = XmlHttp.responseText。
   }
}
功能ShowSum（URL，则params）{
   XMLHTTP = GetXmlHttpObject（）;
   如果（XMLHTTP == NULL）
      返回;
   XmlHttp.onreadystatechange = StateChanged;
   XmlHttp.open（POST，网址，真实）;
   XmlHttp.setRequestHeader（内容型，应用程序/ x-WWW的形式urlen codeD）;
   XmlHttp.setRequestHeader（内容长度，params.length）;
   XmlHttp.setRequestHeader（连接，关闭）;
   XmlHttp.send（PARAMS）;
}

函数的GetInfo（）{VAR海峡=
尺寸1 =+越狱（EN codeURI（的document.getElementById（尺寸1）。值））+
＆放大器; size2个=+越狱（EN codeURI（的document.getElementById（size2个）值）。）;

ShowSum（'http://www.website.com/calc.php'，STR）;
}
 

calc.php

 ＆LT; PHP
$ size1_val =空（$ _ POST ['尺寸1']）？ 0：$ _ POST ['尺寸1'];
$ size2_val =空（$ _ POST ['size2个']）？ 0：$ _ POST ['size2个'];
$ total_size = $ size1_val * $ size2_val;
打印结果。圆（$ total_size）。 ;
？＆GT;
 

HTML表单：

 ＆LT;表＆gt;
＆LT;脚本类型=文/ JavaScript的SRC =calc.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;形式ID =formcalc行动=JavaScript的：的GetInfo（）;接收字符集=未知
ENCTYPE =应用/的X WWW的形式urlen codeD的方法=邮报＆GT;
＆其中; TR＆GT;
＆LT; TD高度=24＆GT;＆LT;强＆GT;尺寸：LT; / STRONG＆GT;
＆LT; / TD＆GT;
＆LT; TD高度=24VALIGN =顶WIDTH =50％＆GT;
＆LT;输入ID =size2个/＆GT; X  - 其中，输入ID =尺寸1S /＆GT;英尺
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆所述; TD COLSPAN =2＆GT;
＆LT;输入名称=计算类型=提交值=计算/＆GT;

＆所述;跨度的id =CalcSum＆所述构建组相比：其中; /跨度＆GT;
＆LT; /形式GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
 

解决方案

添加 $（'的弹出与形式。'）magnificPopup（'开'）; 为下方的stateChanged功能。对我的作品在你的榜样。改变了两个结果的跨度，并打开弹出。

 函数StateChanged（）{
   如果（XmlHttp.readyState == 4 || XmlHttp.readyState ==完成）{
       $（'的弹出与形式）magnificPopup（公开）。
      的document.getElementById（CalcSum）的innerHTML = XmlHttp.responseText。
      的document.getElementById（CalcSumPopup）的innerHTML = XmlHttp.responseText。
   }
}
 

更新：更多的文档在这里 http://dimsemenov.com/plugins/magnific-popup /documentation.html 如果你需要它。

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>

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.