php - On Dropdown Selection, how to fill complete form fields from Database -
how fill complete form input fields database based on value selected dropdown
example: in application, selecting client name fills complete form input fields details stored in database.
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>
all input fields need filled values on client name selection.
edit:
i tried ajax couldn't able particular variable file... below code:
<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>
in get_details.php
file storing different values in different variables, didn't understand how them individual variable main page.
this basic jquery example calls itself, have named index.php
indicated in url
of jquery ajax. can use 2 separate pages if want. separate out php html/javascript , change url: '/index.php'
:
<?php // database call if(!empty($_post)) { // send json array via echo echo json_encode(array("phone"=>'123-12313',"email"=>'test@test.com','city'=>'medicine hat','address'=>'556 19th street ne')); // exit not required if // separate out code 2 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 jquery latest --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function() { // on change of dropdown ajax $("#client").change(function() { $.ajax({ // change link file using url: '/index.php', type: 'post', // sends value of dropdown data: { client: $(this).val() }, success: function(response) { // parse json returned // using conditions here apply // incase nothing returned var vals = json.parse(response); // these inputs 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>
Comments
Post a Comment