在fancybox中检索表单字段并显示值答案

【问题标题】：Retrieving form field and display value in fancybox在fancybox中检索表单字段并显示值
【发布时间】：2013-08-23 16:09:16
【问题描述】：

我正在尝试创建一个带有一个文本字段的基本表单。当用户在文本字段中输入代码时。然后，当他们单击提交时，我将弹出一个 iframe，其中包含 url + 他们的文本字段值。

在我看来一切都设置正确，但fancybox 加载屏幕永远不会消失，iframe 永远不会显示。

这是我当前不起作用的示例：

<form id="Form" onsubmit="fancybox.iframe('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
    <input type="text" name="Event">
</form>

<?PHP
    $eventid = $_POST['Event'];
    echo '<a class="fancybox fancybox.iframe" href="http://www.regonline.com/eventinfo.asp?eventid='. $eventid .'">Submit</a>';
?>

这确实有效，但它会打开另一个窗口，我无法让它与 fancybox iframe 一起使用：

<form id="Form" onsubmit="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
    <input type="text" name="Event">
    <br>
    <a class="event" onclick="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);" href="#">Submit</a>
</form>

我相信这对正确的眼睛来说非常简单，要温柔;）

【问题讨论】：

标签： php wordpress forms iframe fancybox

【解决方案1】：

您似乎遗漏了一些代码，或者您没有全部粘贴。

表单提交在哪里处理？我看到你有一个链接，href 是你想要的 iframe 值，但我不明白这一切之间的联系。

如果单击链接时它会填充名为 Event 的输入字段，那么您实际上是在使用整个 url 填充它。如果您随后使用该字段在 onsubmit 行中填充 iframe，那么您实际上是在将整个 url 再次附加到 url，最后创建一个这样的 url：http://www.regonline.com/eventinfo.asp?eventid=http://www.regonline.com/eventinfo.asp?eventid=SOME_ID_NUMBER

在没有看到所有代码的情况下，我推测您确实希望提交链接中的 href 仅包含 $eventid 值而不是整个 URL。

所以你的代码可能需要：

 echo '<a class="fancybox fancybox.iframe" href="'. $eventid .'">Submit</a>';

【讨论】：

谢谢@SaidK，我实际上希望链接像这样填充：regonline.com/…。所以换句话说，我有一个文本框，用户将在其中输入一个数字，当他们单击我的链接“提交”时，它将在fancybox iframe 中打开上面的 url，其值将代替 WHAT_USER_SUBMITS_IN_TEXTFIELD_EVENT。所以换句话说，如果我在文本字段中输入 12345 并单击提交，那么我的 fancybox iframe 将加载 url regonline.com/eventinfo.asp?eventid=12345。希望这是有道理的。谢谢
您可以这样做，（除非您想通过将用户的输入发送到脚本来处理用户的输入，然后在页面重新加载后打开 iframe）：
regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;"自动完成=“关闭”样式=“高度：100%；” enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
对于上述内容，我所做的只是在表单中添加。这将触发您的表单提交。 @德里克
谢谢，这实际上只是将我带到新窗口中的 mydomain.com/Contact/tabid/59/Default.aspx，而不是花哨的框中的 regonline url + eventid。还有其他想法吗？我想我应该问的是因为我在问题中使用的第二个 sn-p 有效，如何有效地将 window.open 替换为名为 fancybox iframe 的东西。我尝试了 fancybox.iframe 但没有运气。

【解决方案2】：

感谢大家的帮助，这实际上是我一直在寻找的东西，不知何故我最终把它弄对了。再次感谢您的帮助

<form id="Form" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="" method="post" name="Form">
                            <input type="text" name="Event">
                            <br>
                            <a id="event-link" class="event" href="#">Submit</a>
                        </form>
                        <script>
                        $('#event-link').click(function () {
                            $.fancybox({
                                type: 'iframe',
                                href: 'http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value
                            });
                        });
                        </script>

【讨论】：