Use jquery to quickly populate your form with data

As Web programmers, we often deal with forms. For example, when editing some data through a form, it is tedious to read the background data and populate it with forms, especially when the form fields are many and contain radio,checkbox,select and so on. you must have seen the following code:

<select name= "area" ><option value= "Nankai" <?php if ($area = = ' Nankai ') echo ' selected= ' selected ';? >> Nankai District </option><option value= "Hexi" <?php if ($area = = ' Hexi ') echo ' selected= ' selected ';? >> Hexi District </option><option value= "Xiqing" <?php if ($area = = ' xiqing ') echo ' selected= ' selected ';? >> Xiqing District </option></select>

PHP and HTML mixed together very messy, so I thought to use jquery to optimize the process, the PHP code and HTML separation.

Take a look at the following HTML:

<table><tr><td> name </td><td><input type= "hidden" name= "id"/><input type= " Text "name=" name "/> </td></tr><tr><td> region </td><td><select name=" area " ><option value= "Nankai" > Nankai District </option><option value= "Hexi" > Hexi District </option><option value= "Xiqing" > Xiqing District </option></select></td></tr><tr><td> sex </td><td> <input type= "Radio" name= "Sex" value= "male"/> Male <input type= "Radio" name= "Sex" value= "female"/> Female </td ></tr><tr><td> Hobby </td><td><input type= "checkbox" Name= "hobby[]" value= "movie"/ > Movie <input type= "checkbox" Name= "hobby[]" value= "Music"/> Musical <input type= "checkbox" Name= "hobby[" "value=" Basketball "/> Basketball </td></tr><tr><td> Introduction </td><td><textarea name=" Intro " ></textarea></td></tr></table>

This includes the usual form fields, and we'll read the data from the server (php example):

<?php///read user information from the database, note that the key name of the array should be consistent with the form field $user = array (' ID ' =>1, ' name ' = ' Zhang San ', ' area ' = ' hexi ', ' sex ' = ' Male ', ' hobby ' = ' music,movie ', ' intro ' = ' Hello, world ');//serialize array to JSON string $json = Json_encode ($user);? >

Use the following code to populate the form with data:

Assign a PHP generated JSON string to the JS variable var user = ' <?php echo $json;? > '; $ (function () {//Load data into the form loaddata (user);});

The implementation of LoadData is simple, and can be used anywhere after encapsulation into functions, see Code:

function LoadData (jsonstr) {var obj = eval ("(" +jsonstr+ ")"), Var key,value,tagname,type,arr;for (x in obj) {key = X;value = O bj[x];$ ("[Name= '" "+key+" '],[name= ' "+key+" [] '] "). each (function () {TagName = $ (this) [0].tagname;type = $ (this). attr (' Type '), if (tagname== ' INPUT ') {if (type== ' radio ') {$ (this). attr (' checked ', $ (this). Val () ==value);} else if (type== ' checkbox ') {arr = Value.split (', '); for (var i =0;i<arr.length;i++) {if ($ (this). Val () ==arr[i]) {$ (this ). attr (' checked ', true); break;}}} else{$ (This). Val (value);}} else if (tagname== ' SELECT ' | | tagname== ' TEXTAREA ') {$ (this). Val (value);}});}}

Front Effect:

Done, I did not write any PHP code in the form field, the implementation of the code separation, it seems to be more refreshing ~?

Welcome everyone to communicate with me, any questions please leave a message!

Use jquery to quickly populate your form with data