Как заполнить полные поля ввода формы из базы данных на основе значения, выбранного из раскрывающегося списка
Пример. В приложении, выбирая имя клиента, он заполняет поля ввода полной формы данными, хранящимися в базе данных.
Sample Code: <select name="client"> <option value="">-- Select Client Name -- </option> <option value="1">John</option> <option value="2">Smith</option> </select> <input name="phone" type="text" value=""> <input name="email" type="text" value=""> <input name="city" type="text" value=""> <textarea name="address"></textarea> Все поля ввода должны заполняться значениями для выбора имени клиента.
РЕДАКТИРОВАТЬ:
Я попытался с AJAX, но не смог получить конкретную переменную из файла … ниже мой код:
<script> $(document).ready(function() { $('#client').change(function() { alert(); var selected = $(this).find(':selected').html(); $.post('get_details.php', {'client': selected}, function(data) { $('#result').html(data); }); }); }); </script>
В файле get_details.php я get_details.php разные значения в разных переменных, но я не понял, как получить их к отдельной переменной на главной странице.
Это простой базовый пример jQuery, который вызывает себя, который я назвал index.php как указано в url -адресе jQuery AJAX. Вы можете использовать две отдельные страницы, чтобы сделать это, если хотите. Просто отделите PHP от HTML / Javascript и измените url: '/index.php' :
<?php // This is where you would do any database call if(!empty($_POST)) { // Send back a jSON array via echo echo json_encode(array("phone"=>'123-12313',"email"=>'test@test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE')); // Exit probably not required if you // separate out your code into two pages exit; } ?> <form id="tester"> <select name="client" id="client"> <option value="">-- Select Client Name -- </option> <option value="1">John</option> <option value="2">Smith</option> </select> <input name="phone" type="text" value=""> <input name="email" type="text" value=""> <input name="city" type="text" value=""> <textarea name="address"></textarea> </form> <!-- jQuery Library required, make sure the jQuery is latest --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function() { // On change of the dropdown do the ajax $("#client").change(function() { $.ajax({ // Change the link to the file you are using url: '/index.php', type: 'post', // This just sends the value of the dropdown data: { client: $(this).val() }, success: function(response) { // Parse the jSON that is returned // Using conditions here would probably apply // incase nothing is returned var Vals = JSON.parse(response); // These are the inputs that will populate $("input[name='phone']").val(Vals.phone); $("input[name='email']").val(Vals.email); $("input[name='city']").val(Vals.city); $("textarea[name='address']").val(Vals.address); } }); }); }); </script>
Когда вы вернули данные ajaxCall в формате json, например
json_encode(array("phone"=>'123-12313',"email"=>'test@test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
показанное выше
затем проанализируйте его в jQuery и поместите значение в разные селекторы, например
var Vals = JSON.parse(response); // These are the inputs that will populate $("input[name='phone']").val(Vals.phone);
показанное выше.