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

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

Pregunta

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.

¿Fue útil?

Solución

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.

Otros consejos

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.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top