0

嗨，我有一个表单，用户需要输入搜索词。在提交表单时，我希望“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 中。

4

2 回答 2

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。

于 2013-09-27T19:52:01.657 回答
0

去获取一个像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.
于 2013-09-27T19:27:19.610 回答