Как автоматически генерировать текстовое поле на основе выбора выпадающего списка

Question

У меня есть небольшое поле формы, которое имеет dropdown <name="product">, этот список создается путем вытаскивания данных из таблицы mysql.

для MySQL DB настроен следующим образом:

Таблица продукта:

Column: Product 
    Column: Product ID 

Таблица Контакт:

Column: Product ID 
    Column: Contact Name 
    Column: Contact name #2 
    Column: Contact Name #3 
    Column: Contact name #4 

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

Name1 
Name2 
Name3 
Name4 

Есть ли быстрый и простой способ сделать это?

Намерение формы также захватит некоторые другие данные и отправит их в отдельную базу данных, что приведет меня к тому, как связать две базы данных.

Спасибо.

Answer 1

Существует много способов сделать это. Вот один:

1. При подготовке страницы, запрос все Contact строк столбцов и поместить их в массив JavaScript на этой странице. Там выход может выглядеть примерно так (есть много правильных способы реализации этого):

   <script language=JavaScript> 
   var contactInfo = new Array(
       {prodID: 1, name1: 'aaaa', name2: 'bbbb', name3: 'cccc', name4: 'dddd'}, 
       {prodID: 4, name1: 'eeee', name2: 'ffff', name3: 'gggg', name4: 'hhhh'}, 
       ... 
       {prodID: 90, name1: 'wwww', name2: 'xxxx', name3: 'yyyy', name4: 'zzzz'} 
   ); 
   

2. В раскрывающемся списке-х onchange, вызовите функцию для обработки productID выбора:

   <select name="ddlProductID" onchange="processProductChange(this);"> 
   

3. Убедитесь, что текстовые поля определены. Для этого примера я буду называть их txtName1 через txtName4:

   <input type=text name="txtName1"> 
   ... 
   <input type=text name="txtName1"> 
   

4. В вызываемой функции, получить значение в раскрывающемся списке и найдите его в contactInfo массиве. Это приведет вас к именам, и вы можете совать их в поле:

   function processProductChange(prodDropdown) { 
       for (indx = 0; indx < contactInfo.length; ++indx) { 
       if (contactInfo[indx].prodID == prodDropdown.value { 
        // The product ID has been located in the array. Put its names 
        // in the txtName1 through txtName4 textboxes. 
        document.forms[0].txtName1.value = contactInfo[indx].name1; 
        document.forms[0].txtName2.value = contactInfo[indx].name2; 
        document.forms[0].txtName3.value = contactInfo[indx].name3; 
        document.forms[0].txtName4.value = contactInfo[indx].name4; 
        // all done, can get out 
        break; 
       } 
       } 
   } 
   

---

Дополнение: OP попросил более подробно об этом подходе. Для этого требуется некоторый PHP-код, который мне не подходит, но я достаточно знаю, что сначала предоставлю обязательное предупреждение об использовании функций PHP mysql. Здесь ...

Функции PHP mysql устарели. Вместо этого используйте PDO или mysqli.

Теперь вернемся к ответу. Как уже упоминалось, мой PHP не так уж хорош, но в основном вы хотите отформатировать строки сценария {prodID: ... } с шага 1 при заполнении выпадающего списка; таким образом вам нужно только сканировать результаты один раз.Это бы что-то вроде этого (чередующиеся в коде OP содержится в комментарии):

<?php 
$jsArray = ''; 
while ($row = mysql_fetch_array($productlist)) { 
    $rowmod = strtr($row['ProductID']," ","_"); // change the spaces to underscore to work in URL line 
    if (jsArray) { 
    // comma between elements 
    jsArray .= ","; 
    } 
    jsArray .= "\n{prodID: {$row['ProductID']}, "; 
    jsArray .= "name1: \"{$row['Name1']}\", "; 
    jsArray .= "name2: \"{$row['Name2']}\", "; 
    jsArray .= "name3: \"{$row['Name3']}\", "; 
    jsArray .= "name4: \"{$row['Name4']}\"}"; 
    echo "<option value='$rowmod'>$row[ProductElement]</option>"; 
} 
?> 

Затем, когда вы спокойно можете поместить JavaScript (скажем, после закрытия <form> тега, сделайте следующее:

<? php 
echo <<< endJS 
<script language="JavaScript"> 
    var contactInfo = new Array($jsArray); 

    NOTE: PASTE THE FUNCTION FROM STEP 4 HERE 

</script> 
endJS; 
?> 

Есть вероятность, что в коде есть ошибка или две, поэтому, возможно, потребуется некоторая отладка.