При событии OnClick отправить запрос на сервер.
Здравствуйте уважаемые. Прошу помощи. Суть вопроса такова.
Имеется такой вот код:
<tr>
<td><form><input type="checkbox" name="box_s" onclick="this.form.elements['s'].disabled=!this.checked">
<select name="s" disabled>
<?
include ('mysql.php');
$query = "SELECT * FROM street";
$sql = mysql_query($query) or die(mysql_error());
while ($row=mysql_fetch_array($sql))
{
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
};
?>
</select>
</form>
</td>
<td><form><input type="checkbox" name="box_s" onclick="this.form.elements['h'].disabled=!this.checked">
<select name="h" disabled>
<?
include ('mysql.php');
$query = "SELECT * FROM houses";
$sql = mysql_query($query) or die(mysql_error());
while ($row=mysql_fetch_array($sql))
{
print '<option value="'.$row['id'].'">'.$row['number'].'</option>';
};
?>
</select>
</form>
</td>
</tr>
Необходимо чтобы при активном первом селекте отправлялся запрос к БД для "выдергивания" из нее значений для второго селекта. Перерыл кучу инфы, в том числе и на этом форуме, но так и не смог разобраться как это сделать. Предполагаю что копать нужно в сторону JSON, но там вобще темный лес для меня. Помогите пожалуйста. Заранее благодарен. |
1. активация 1-го селекта
2. отправка ajax-запроса к бд 3. формирование селекта (на выбор) а) на стороне сервера б) на стороне клиента 4. добавляем селект на страницу в сторону JSON копать не надо, надо почитать про JS и ajax |
Цитата:
|
Возник вопрос. А как мне в ajax-запрос вставить значение переменной $row['id'] например? И надо сделать таким образом, чтобы при выборе любого значения первого селекта сразу же отправлялся запрос.
|
смотрите onchange для селекта.
значение селекта document.getElementsByName('s').value разберитесь как отправить ajax- запрос |
Спасибо за направление. Буду штудировать.
|
Цитата:
document.getElementsByName('s')[0].options[document.getElementsByName('s')[0].selectedIndex].value
|
упс:)
все же надо было подробнее разбираться с обычным JS, для начала, а не переходить сразу на фреймворки... |
Цитата:
|
Почитал, более менее разобрался. Нашел даже пример подходящий под мои запросы. Чуть подправил. Получилось вот что.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./jQuery.js" type="text/javascript"></script>
<style type="text/css">
body {
position: relative;
margin: 0;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 9pt;
color: #000;
}
.border {
float: left;
margin: 10px 0 0 5px;
}
label {
padding-left: 5px;
}
select {
width: 130px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 9pt;
color: #000;
}
</style>
<script type="text/javascript">
(function($){
// очищаем select
$.fn.clearSelect = function() {
return this.each(function(){
if(this.tagName=='SELECT') {
this.options.length = 0;
$(this).attr('disabled','disabled');
}
});
}
// заполняем select
$.fn.fillSelect = function(dataArray) {
return this.clearSelect().each(function(){
if(this.tagName=='SELECT') {
var currentSelect = this;
$.each(dataArray,function(index,data){
var option = new Option(data.text,data.value);
if($.support.cssFloat) {
currentSelect.add(option,null);
} else {
currentSelect.add(option);
}
});
}
});
}
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
// выбор дома
function adjustBuild(){
var streetValue = $('#street').val();
var tmpSelect = $('#build');
if(streetValue.length == 0) {
tmpSelect.attr('disabled','disabled');
tmpSelect.clearSelect();
adjustFront();
} else {
$.getJSON('cascadeSelectBuild.php',{street:streetValue},function(data) {
tmpSelect.fillSelect(data).attr('disabled',''); adjustFront();
});
}
};
// выбор подъезда
function adjustFront(){
var streetValue = $('#steet').val();
var buildValue = $('#build').val();
var tmpSelect = $('#front');
if(streetValue == 0||buildValue == 0) {
tmpSelect.attr('disabled','disabled');
tmpSelect.clearSelect();
} else {
$.getJSON('cascadeSelectFront.php',{street:streetValue,build:buildValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); });
}
};
$('#street').change(function(){
adjustBuild();
}).change();
$('#build').change(adjustFront);
$('#front').change(function(){
if($(this).val().length != 0) {
showClient();
}
});
});
</script>
</head>
<body bgcolor="#E0E0E0">
<div class="border">
<label>Улица</label><br />
<select id="street">
<?
include ('mysql.php');
$query = "SELECT * FROM street";
$sql = mysql_query($query) or die(mysql_error());
while ($row=mysql_fetch_array($sql))
{
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
};
?>
</select>
</div>
<div class="border">
<label>Дом</label><br />
<select id="build" disabled="disabled"></select>
</div>
<div class="border">
<label>Подъезд</label><br />
<select id="front" disabled="disabled"></select>
</div>
</body>
</html>
А это скрипт, формирующий ответ для "селекта" "Дом".
<?php
header('Content-Type: text/html; charset=utf-8');
include ('mysql.php');
$street = (isset($_GET['street'])) ? mysql_real_escape_string($_GET['street']) : '';
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if(isset($street)) {
$query = "SELECT `id` as 'value',`build_num` as 'text' FROM `houses` WHERE `street_id`='{$street}'";
$sql = mysql_query($query) or die(mysql_error());
$builds=array();
$builds[]=array('value'=>'0','text'=>'Undefined');
while ($row=mysql_fetch_array($sql))
{
$builds[]=$row;
}
print json_encode($builds);
}
}
?>
Может кому пригодится.)) |
| Часовой пояс GMT +3, время: 03:11. |