Заполняющие входы, основанные на выпадающем списке HTML

Question

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

У меня есть HTML-форма с PHP, которая извлекает данные из базы данных MSSQL, чтобы заполнить раскрывающийся список. Я хочу иметь возможность заполнять текстовые поля контактной информации после выбора имени из раскрывающегося списка. До сих пор у меня есть место, где, если я выбираю конкретного поставщика, имя поставщика автоматически вводится в поля Name, Email и Phone Number. Тем не менее, я хочу иметь разные атрибуты, введенные в текстовые поля, а не только имя поставщика. Как я могу это сделать?

Поля из моей базы данных с именем, адресом электронной почты и номером телефона, который я хочу импортируемое имя MR_POC_N, MR_POC_E и MR_POC_P

также «MR_Name», что вы видите это поле со всеми именами поставщики FYI

Вот мой код HTML выпадающего списка:

<select name="vendor_dropdown" id="ven" onChange="updateinput();"> 
    <option value="">Choose a Vendor</option> 
     <?php foreach($users->fetchAll() as $user): ?> 
      <option><?php echo $user['MR_Name'];?></option> 
     <?php endforeach; ?> 
</select> 

Вот мой код Контактная информация:

<table align="center"> 
    <tr> 
     <td align="right">Name:</td> 
     <td><input class="textbox" type="text" id="name" name="name"></td> 
    </tr> 
    <tr> 
     <td align="right">Email:</td> 
     <td><input class="textbox" type="email" id="email" name="email"></td> 
    </tr> 
    <tr> 
     <td align="right">Phone Number:</td> 
     <td><input class="textbox" type="tel" id="tel" name="number"></td> 
    </tr> 
</table> 

Вот функция ввода обновления, которую я имею в JS. Я знаю, что это прочь, но ищу какое-то направление, я не самые лучшие в JS:

function updateinput() { 


    var e = document.getElementById("ven"); 
     var venSelected = e.options[e.selectedIndex].value; 

     document.getElementById("name").value=venSelected; 
     document.getElementById("email").value=venSelected; 
     document.getElementById("tel").value=venSelected; 
    } 

Answer 1

своего сценарий так же, как это в настоящее время, но изменить JavaScript и ниспадающее меню. В своем выпадающем меню попробуйте сделать

<option value = "<?=$user['MR_Name'];?>"><?php echo $user['MR_Name'];?></option> 

Вы хотите сделать так называемый запрос AJAX. Это позволит вам перейти на другую страницу, получить некоторые данные в вашем случае, когда вы получите некоторую информацию о пользователе и вернете ее на страницу без изменения пользователем страницы!

Просьба уточнить this для получения дополнительной информации о AJAX.

Ваш вызов AJAX будет выглядеть примерно так.

function updateinput() { 
    var e = $("#ven").val(); 

    $.ajax({ 
     url: "get-user-info.php", 
     type: "POST", 
     data: {e: e}, 
     success: function(data){ 
      data = JSON.parse(data); 

      var email = data[0]; 
      var tel = data[1]; 

      $("#email").val(email); 
      $("#tel").val(tel); 
     } 
    }); 
} 

Этот скрипт сначала получает выбранное значение выпадающего списка. Затем он запускает вызов AJAX, это как отправка формы, мы размещаем значения на следующей странице. Таким образом, страница, с которой AJAX будет разговаривать, - это get-user-info.php, она отправляет значения из данных. Данные отправляются через e, что и есть выпадающее значение. После этого он выполнит код под ним, который скажет данные синтаксического анализа из массива PHP на JavaScript, а затем говорит, что электронное письмо является первым значением массива, а tel - вторым значением из массива. Затем мы говорим, что вход с идентификатором «email» теперь равен email из массива, а вход с идентификатором «tel» теперь равен tel из массива.

Теперь необходимо создать скрипт в том же каталоге под названием get-user-info.php

В этом скрипте сделать вызов к базе данных, где пользователь совпадает с выбранным значением e и возвращать PHP массив, который выглядит как это:

array(email, telephone)

Это псевдо-код для вашего PHP скрипт get-user-info.php:

<?php 

$e = $_POST["e"]; 
//Do your SQL 

//In the loop 
$array[] = $user["email"]; 
$array[] = $user["tel"]; 

echo json_encode($array); 
?>