Question

您好我有一个表单，用户需要输入搜索字词。在提交表单时，我希望“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文件处理表单，显示的结果应该显示在与表单相同的页面上的shadowbox中。我假设search.php页面显示在iframe中并显示在影子框中。

Answer 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。

Answer 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.

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

2 个答案: