Динамически заполнять несколько полей ввода из MySQL в зависимости от выбранного списка элементов списка.

Question

Я искал сайт для этого, но прихожу с пустыми руками. Вот то, что я пытаюсь сделать:

• Пользователь выбирает один из нескольких вариантов из выпадающего списка
• Два поля ввода изменения, чтобы отразить этот выбор, заполнение полей ввода с данными тянули из моей базы данных

Смотрите изображение ниже для визуального представления о том, что я имею в виду:

Я знаю, что я буду нуждаться в JavaScript для Тхи но мои навыки JS не так горячие (и я думаю, что у меня есть мгновенная потеря мозговой силы сегодня)!

Вот код, который я до сих пор (не беспокойтесь о устаревшей PHP):

<select name="item" id="item"> 

<?php 
while($row = mysql_fetch_array($result)) { 
    $item_id = $row['item_id']; 
    $item_category = $row['item_category']; 
    $item_title = $row['item_title']; 
    $item_price = $row['item_price']; 
    $item_description = $row['item_description']; 

    echo "<option value=\"".$item_id."\">".$item_title."</option>"; 
} 
?> 

</select> 

<script> 
function update_txt() { 
    price = document.getElementById('item').selectedIndex.value; 
    document.getElementById('item_details').value = price; 
    document.getElementById('item_price').value = price; 
} 
</script> 

<input id="item_details" type="text" class="validate"> 
<input id="item_price" type="text" class="validate" value="$"> 

Любая помощь очень ценится! Дайте мне знать, если вам нужно разъяснение. :)

Answer 1

Я бы JSON закодировать строку и сохранить его в качестве данных-атрибута на опции, а затем прочитать атрибут выбирает изменить событие:

<select name="item" id="item"> 
<?php 
    while($row = mysql_fetch_array($result)) { 
     $item_id = $row['item_id']; 
     $item_title = $row['item_title']; 
     echo "<option value=\"".$item_id."\" data-json='" . json_encode($row) . "'>".$item_title."</option>"; 
    } 
?> 
</select> 
<input id="item_details" type="text" class="validate"> 
<input id="item_price" type="text" class="validate" value="$"> 

<script> 
    $('#item').on('change', function() { 
     var selected = $(this).find('option[value="' + $(this).val() + '"]').data('json'); 
     $('#item_details').val(selected.item_description); 
     $('#item_price').val(selected.item_price); 
    }); 
</script> 

Answer 2

Вы можете использовать комбинацию PHP, AJAX и JavaScript (или jQuery).

Основная идея заключается в следующем:

1. Пользователь выбирает вариант (ы)
2. JavaScript используется для обнаружения выбора и вариант (ы) выбранный
3. AJAX получает параметры выбранного , форматирует его и передает его на страницу «PHP»
4. PHP выполняет SQL-запросы и передает значения обратно
5. AJAX получает эти значения и заполняет текущую страницу с помощью стандартного Jav aScript методы

Здесь есть хороший учебник, который показывает, как он подходит друг другу: http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php. Однако я бы использовал подготовленные операторы вместо SQL-запросов, показанных в этом примере.