Question

大家好！所以我是一个菜鸟，我的大部分代码都是由程序员为我完成的。我现在不能让他帮助我。

我有一个显示结果的计算器（由calc.php生成）而不重新编码页面。 演示在这里：http://www.roofingcalculator.org/popup/popup.htm

现在我从这里添加了Ajax弹出窗口（联系表单）：http://dimsemenov.com/plugins/magnific-popup/并且它可以工作。

我想要的是在Popop中显示calc.php的结果，但它不起作用。

详细说明：

当用户点击“计算”按钮时，表单会使用POST将信息发送到CALC.JS，然后POST会将信息发送到CALC.PHP并将diplays结果返回到带有此标记的页面上：

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

当我将SPAN标记添加到弹出窗口时，它不会显示PHP的结果。

问题如何在AJAX Popup中显示结果？

请帮助 - 我非常感谢任何帮助 - 干杯！

Calc.js内容：

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表格：

<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

Ajax弹出窗口的html与表单位于同一页面上吗？如果是这样，请添加

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

到你想要结果的弹出窗口并添加

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

在Calc.js中的document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;之后

如果它不在同一页面上，则无效。

编辑：这是有效的，因为id是唯一的。 getElementById会找到指定id的第一个匹配项，然后停止，所以如果你想要更改多个地方，你需要给它们唯一的id。

Answer 2

将$('.popup-with-form').magnificPopup('open');添加到stateChanged函数，如下所示。在你的例子上为我工作。更改了两个结果跨度并打开弹出窗口。

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;
   }
}

更新：如果您需要更新文档http://dimsemenov.com/plugins/magnific-popup/documentation.html。

在Ajax Popup中显示PHP输出

2 个答案: