javascript - Fill inputs by clicking on div - jQuery -

i wanna fill form automatically clicking on div has contents required form.

my div -

<div class="ab">     <ul>         <li>sahar raj</li>         <li>address.</li>         <li>city</li>         <li>state</li>         <li>pin</li>         <li>9876543210</li>     </ul> </div> 

form -

<input class="required" type="text" name="name" /> <textarea name="address" class="required"></textarea> <input class="required" type="text" name="city" /> <select name="state">     <option value="0">state1</option>     <option value="1">state2</option> </select> <input class="required" type="text" name="pin" /> <input class="required" type="text" name="phone" /> 

any idea how achieve this? thanks

you can use mix of map , each methods working.

remember order important working. if have haphazard order, can use data-* attributes store related field info , populate it.

$(function () {     $('div.ab').click(function() {         var data = $('.ab li').map(function () {             return this.innerhtml;             // or return $(this).text();         }).get();          $('input').each(function (i) {             this.value = data[i];             // or  $(this).val(data[i]);         });     }); }); 

check fiddle

update

i have used data-* attributes establish relationship between elements no more of same kind. mapped name attribute of field. encased fields in container makes them easier select.

html

<div class="ab">     <ul>         <li data-key="name">sahar raj</li>         <li data-key="address">address.</li>         <li data-key="city">city</li>         <li data-key="state">state2</li>         <li data-key="pin">pin</li>         <li data-key="phone">9876543210</li>     </ul> </div> <div class="container">     <input class="required" type="text" name="name" />     <textarea name="address" class="required"></textarea>     <input class="required" type="text" name="city" />     <select name="state">         <option value="0">state1</option>         <option value="1">state2</option>     </select>     <input class="required" type="text" name="pin" />     <input class="required" type="text" name="phone" /> </div> 

js

$(function () {     $('div.ab').click(function () {         $('.container').children().each(function() {              // corresponding key value li.              var $this =  $(this),                  key = $this.attr('name');              // find li key             var txt = $('.ab li[data-key="'+ key +'"]').text();              $this.val(txt);         });     }); }); 

check data fiddle