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

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.

Solution

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.