HTML/Javascript - Submit a form and show results in shadowbox

StackOverflow https://stackoverflow.com/questions/19057689

Domanda

Hi I have a form where the user is required to enter a search term. On the submission of the form, I want the results of the "search.php" page to be displayed in an Iframe inside a shadowbox (Using the shadowbox.js library). I dont know if this is possible or not so any guidance would be appreciated. Thanks

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

So basically, I want the the search.php file to process the form and the result that gets displayed should be shown in a shadowbox, on the same page as the form. Im assuming the search.php page is shown in an iframe and displayed in the shadowbox.

È stato utile?

Soluzione

You need to use some AJAX for this. Or well you could pass a iframe by doing...

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

That should get it for you. It should implement your iframe for you.

Altri suggerimenti

Go get a javascript plugin like colorbox, read the documentation, copy-paste like a pro, debug and come back here if you need more help.

Colorbox - a jQuery lightbox

A lightweight customizable lightbox plugin for jQuery

Features

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.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top