graf_vorontsov
13.06.2017, 11:29
Есть одна страница и на ней находится форма поиска и выпадающие списки. Информация берётся из БД.
И поиск и селект работает отлично, но хочу чтоб они не пересекались друг с другом. Т.е. если я воспользовался поиском и получил результат, а потом пользуюсь селектом, то результат поиска должен убираться, ну и соответственно наоборот.
А так как страница не перегружается то оба результата показываются пользователю.
вот код селекта
$(document).ready(function(){
$('#select_marka').change(function(){
$.post(
'php/populate_select.php',
{ marka_id:$('#select_marka').val()},
function(res){
$('#modele').html(res);
}
)
});
});
а вот поиска
/* -------------------------- */
/* XMLHTTPRequest Enable */
/* -------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function searchNameq() {
searchq = encodeURI(document.getElementById('searchq').value );
document.getElementById('msg').style.display = "block";
document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'php/in-search.php?name='+searchq+'&nocache = '+nocache);
http.onreadystatechange = searchNameqReply;
http.send(null);
}
function searchNameqReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('search-result').innerHTML = response;
}
}
вот пхп
<!DOCTYPE html>
<html>
<head>
<title>Выбор марки и модели автомобиля</title>
<!-- Подключаем библиотеку jQuery -->
<script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script>
<!-- Подключаем таблицу стилей -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
<script src="js/custom.js"></script>
<script src="js/table.js"></script>
<script src="js/search.js"></script>
</head>
<body>
<?php require_once('php/db.php'); ?>
<h1>Подбор амортизаторов по каталогу</h1>
<?php
$marki = pobierzMarki();
?>
<div id="form">
<form id="searchFormx">
<div id="marki">
<select id="select_marka">
<option value="">Выберите марку</option>
<?php foreach($marki as $marka): ?>
<option value="<?php echo $marka['marka_id'];?>"><?php echo $marka['marka_name'];?></option>
<?php endforeach; ?>
</select>
</div>
<div id="modele">
</div>
<div id="cars">
</div>
</form>
<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
<div class="searchInput">
<input name="searchq" placeholder="Поиск по номеру..." type="text" id="searchq" onkeyup="javascript:searchNameq()"/>
<button type="submit" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"></button>
</div>
</form>
<div id="info">
</div>
<div style=" width:100%; height:1px; clear:both;"></div>
</div>
<h3>Результат поиска</h3>
<div id="msg"></div>
<div id="search-result"></div>
</body>
</html>
И поиск и селект работает отлично, но хочу чтоб они не пересекались друг с другом. Т.е. если я воспользовался поиском и получил результат, а потом пользуюсь селектом, то результат поиска должен убираться, ну и соответственно наоборот.
А так как страница не перегружается то оба результата показываются пользователю.
вот код селекта
$(document).ready(function(){
$('#select_marka').change(function(){
$.post(
'php/populate_select.php',
{ marka_id:$('#select_marka').val()},
function(res){
$('#modele').html(res);
}
)
});
});
а вот поиска
/* -------------------------- */
/* XMLHTTPRequest Enable */
/* -------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
/* -------------------------- */
/* SEARCH */
/* -------------------------- */
function searchNameq() {
searchq = encodeURI(document.getElementById('searchq').value );
document.getElementById('msg').style.display = "block";
document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'php/in-search.php?name='+searchq+'&nocache = '+nocache);
http.onreadystatechange = searchNameqReply;
http.send(null);
}
function searchNameqReply() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('search-result').innerHTML = response;
}
}
вот пхп
<!DOCTYPE html>
<html>
<head>
<title>Выбор марки и модели автомобиля</title>
<!-- Подключаем библиотеку jQuery -->
<script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script>
<!-- Подключаем таблицу стилей -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
<script src="js/custom.js"></script>
<script src="js/table.js"></script>
<script src="js/search.js"></script>
</head>
<body>
<?php require_once('php/db.php'); ?>
<h1>Подбор амортизаторов по каталогу</h1>
<?php
$marki = pobierzMarki();
?>
<div id="form">
<form id="searchFormx">
<div id="marki">
<select id="select_marka">
<option value="">Выберите марку</option>
<?php foreach($marki as $marka): ?>
<option value="<?php echo $marka['marka_id'];?>"><?php echo $marka['marka_name'];?></option>
<?php endforeach; ?>
</select>
</div>
<div id="modele">
</div>
<div id="cars">
</div>
</form>
<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
<div class="searchInput">
<input name="searchq" placeholder="Поиск по номеру..." type="text" id="searchq" onkeyup="javascript:searchNameq()"/>
<button type="submit" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"></button>
</div>
</form>
<div id="info">
</div>
<div style=" width:100%; height:1px; clear:both;"></div>
</div>
<h3>Результат поиска</h3>
<div id="msg"></div>
<div id="search-result"></div>
</body>
</html>