Передача значения опции php без отправки формы

Question

Я искал решение для своей проблемы, но безуспешно. У меня есть HTML-форму с выбора элемента для выбора номера, например:

<select name="room" id="room"> 
<option value="MATH-1">MATH-1</option> 
<option value="CHEM-3">CHEM-3</option> 
<option value="LAB-04">LAB-04</option> 
</select> 

, а затем в виде у меня есть элемент диапазона для выбора количества людей:

<input type="range" name="personCount" id="personCount" min="1" max="20"> 

Информация о номерах (имя и емкость) хранятся в базе данных mySQL. То, что я хочу сделать, - установить max. значение в элементе диапазона для значения, загруженного из базы данных (номер 20 является всего лишь примером), и каждый раз, когда изменяется селектор комнаты, я также хочу изменить макс. значение в элементе диапазона. Я знаю, как получить значение от селектора (возможно, используя javascript), и я также знаю, как получить доступность комнаты из базы данных, когда я уже знаю имя комнаты, но я не знаю, как скомбинировать javascript с php. Моя идея, как это должно выглядеть, выглядит примерно так:

<input type="range" name="personCount" id="personCount" min="1" max="<?php getRoomCapacity($roomName); ?>"> 

Я благодарен за любые советы.

Answer 1

Если вы хотите сделать это динамически, вы можете использовать AJAX. Если вы используете JQuery, вы можете сделать это следующим образом:

Javascript (Jquery):

$(document).ready(function() { 
    // when room is changed 
    $("#room").change(function() { 
     var room = $("#room").val(); 

     // use AJAX to call php for getting room capacity 
     $.post("getroomcapacity.php", 

      { room: room }, 

      function(data) { 
       // set max attribute with the data we got from getroomcapacity.php 
       $("#personCount").attr("max", data.max); 

     }); 
    }); 
}); 

getroomcapacity.php:

<?php 
$room = $_POST['room']; 

$max = 20; // you get this value from db 

echo json_encode(array('max' => $max));