HTML/Javascript - 提交表单并在 shadowbox 中显示结果答案

【问题标题】：HTML/Javascript - Submit a form and show results in shadowboxHTML/Javascript - 提交表单并在 shadowbox 中显示结果
【发布时间】：2013-09-27 18:29:37
【问题描述】：

您好，我有一个表单，要求用户输入搜索词。在提交表单时，我希望“search.php”页面的结果显示在 shadowbox 内的 Iframe 中（使用 shadowbox.js 库）。我不知道这是否可能，所以任何指导将不胜感激。谢谢

<form name="search" action="search.php" method="get">
Enter Search Term: <input type="text" name="search">
<input type="submit" value="Submit">
</form>

PHP：

<?php
if(!empty($_GET['search'])){
  $c = $_GET['search'];
  $t = "You searched for" . $c;
}else{
  $t = "Can't find search term!";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Search</title>
</head>
<body style='background-color:#ffffff;'>
<?php echo $t; ?>
</p>
</body>
</html>

所以基本上，我希望 search.php 文件处理表单，并且显示的结果应该显示在阴影框中，与表单在同一页面上。我假设 search.php 页面显示在 iframe 中并显示在 shadowbox 中。

【问题讨论】：

相信您可以将表单的target设置为iframe的name。例如<form name="search" action="search.php" method="get" target="someiframe"> 和 iframe 中的<iframe ... name="someiframe">
我不一定要问如何发布到 iframe，而是要问如何通过 iframe 使表单的结果显示在影子框中
如果您能分享更多代码以帮助我准确了解您要查找的内容，我将很乐意提供帮助。我不知道小提琴是否有用，但那会很棒。
@rosscowar 我已经添加了 php 代码并添加了更好的解释

标签： javascript html forms shadowbox

【解决方案1】：

您需要为此使用一些 AJAX。或者你可以通过做一个 iframe...

<form name="search" action="javascript:void();" method="get">
Enter Search Term: <input type="text" id="keyword" name="search">
<input type="submit" onClick="search()" value="Submit">
</form> 

<script>
function search() {
    var searchIframe = document.createElement("iframe");
    searchIframe.setAttribute("src","search.php?search="+document.getElementById("keyword").value);
    searchIframe.setAttribute("className","Inset your class with CSS props");
    document.getElementById("shadowBox").appendChild(searchIframe); //Put it in your shadowBox so it will display in the right position you want.
}
</script>

这应该会为您服务。它应该为你实现你的 iframe。

【讨论】：

【解决方案2】：

去获取一个像 colorbox 这样的 javascript 插件，阅读文档，像专业人士一样复制粘贴，调试，如果需要更多帮助，请返回这里。

Colorbox - 一个 jQuery 灯箱

一个轻量级的 jQuery 可定制灯箱插件

特点

Supports photos, grouping, slideshow, ajax, inline, and iframed content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.
Can be extended with callbacks & event-hooks without altering the source files.
Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
Preloads upcoming images in a photo group.
Well vetted and currently in use in over 600,000 websites.

【讨论】：

但是我怎样才能让表单直接进入颜色框并且 php 页面显示在颜色框中的 iframe 中？
阅读文档，我为您提供了链接。帮助您是免费的，为您服务是 70 美元/小时。