Điền Form với jQuery Populate.

jQuery Populate là một plugin giúp tự động điền dữ liệu vào form từ một chuỗi JSON. Plugin này giúp ta tự động điền giá trị của Form ngay khi người dùng mở trang web, hoặc cập nhật thông tin từ server.
Với PHP5, ta có thể cung cấp json dễ dàng nhờ hàm json_encode() được tích hợp sẵn.
Ví dụ đơn giản:

<form id="my-form" method="post">

 <label>Username</label>

 <input name="username" value="" id="username" maxlength="40" type="text"><br>

 <label>Role</label>

 <select name="role" id="role">

 <option value="0">admin</option>

 <option value="1">editor</option>

 <option value="2">user</option>

 </select><br>

 <label>Sex</label>

 <input name="sex" value="male" class="check" id="aa8da" type="radio">

 <input name="sex" value="female" class="check" id="c19cb" type="radio">

 <input name="sex" value="unknown" class="check" id="ccf23" type="radio">

 <hr>

 <input name="submit" value="Gửi" id="submit" type="submit">

 <input name="reset" value="Nhập lại" id="reset" type="reset"><br>

</form>

<button type="button" id="populate-form">Populate Default Values<button>

<button type="button" id="request-populate-form">Request and Populate</button>

<script type="text/javascript">

 $(document).ready(function(){

 $("#populate-form").click(function(){

 $("#my-form").populate({"username" : "Username that you like", "Role" : 1, "Sex" : "unknown"});

 });

 $("#request-populate-form").click(function(){

 $.getJSON("populate.php", function(jsonobj){$("#my-form").populate(jsonobj)});

 });

 });

</script>

Ở form trên, có 2 nút. Nút Populate Default Value demo việc sử dụng jQuery Populate để điền form ngay khi người dùng mở trang web.
Nút Request and Populate demo việc gửi một truy vấn tới server, cụ thể là tới file populate.php để lấy các giá trị cần điền vào form. Trên server ta cần tạo thêm một PHP file tên là populate.php với nội dung sau:

<?php

 $data = array('username' => 'demo', 'role' => 2, 'sex' => 'unknown');

 echo json_encode($data);

?>