Допустим, имеется селективный список select, значения которого при выборе надо вывести на странице. Например, вывод значений в форме связи или калькуляторе. Для этого понадобится связка php + jquery ajax. Если немного доработать этот скрипт, то в перспективе его можно использовать для расчета формул, а так же передачи и сохранения данных в БД.
Разметка селекта:
<select name="select" id="select">
<option value="значение 1">значение 1</option>
<option value="значение 2">значение 2</option>
<option value="значение 3">значение 3</option>
</select>
<div class=success></div>
<option value="значение 1">значение 1</option>
<option value="значение 2">значение 2</option>
<option value="значение 3">значение 3</option>
</select>
<div class=success></div>
Скрипт jquery ajax для передачи данных в обработчик:
<script>
jQuery(document).ready(function () {
$("#select").on("change", function () {
$.ajax({ url: '/путь-до-скрипта/ajax.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function (data) {
$('.success').show(300);
$('.success').html(data);
}
});
event.preventDefault();
});
});
</script>
jQuery(document).ready(function () {
$("#select").on("change", function () {
$.ajax({ url: '/путь-до-скрипта/ajax.php',
method: 'post',
dataType: 'html',
data: $(this).serialize(),
success: function (data) {
$('.success').show(300);
$('.success').html(data);
}
});
event.preventDefault();
});
});
</script>
Php обработчик ajax.php:
<?php
$val=$_POST['select'];
if ($val=="значение 1" ) {
echo 'Вы выбрали: значение 1';
}
if ( $val=="значение 2" ) {
echo 'Вы выбрали: значение 2';
}
if ( $val=="значение 3" ) {
echo 'Вы выбрали: значение 3';
}
?>
$val=$_POST['select'];
if ($val=="значение 1" ) {
echo 'Вы выбрали: значение 1';
}
if ( $val=="значение 2" ) {
echo 'Вы выбрали: значение 2';
}
if ( $val=="значение 3" ) {
echo 'Вы выбрали: значение 3';
}
?>
Перед использованием скрипта необходимо подключить к странице библиотеку jquery. Ее можно скачать отсюда, либо подключить с помощью ссылки
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Демо
Как проверить input на пустоту с помощью jquery, можно прочитать здесь.
