HTML/Javascript - отправить форму и показать результаты в shadowbox

Привет у меня есть форма, где пользователь должен ввести поисковый запрос. При отправке формы я хочу, чтобы результаты страницы "search.php" отображались в Iframe внутри shadowbox (с использованием библиотеки 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.

Источник

2 ответа

Решение

Вы должны использовать 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 для вас.

Источник

Получите плагин javascript, такой как colorbox, прочитайте документацию, скопируйте и вставьте как профессионал, отладьте и вернитесь сюда, если вам нужна дополнительная помощь.

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.
Источник
Другие вопросы по тегам