I wanna fill a form automatically by clicking on a div which has all the contents required for the 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 to achieve this? Thanks

I wanna fill a form automatically by clicking on a div which has all the contents required for the 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 to achieve this? Thanks

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Aug 10, 2013 at 13:09 putvande 15.2k33 gold badges3636 silver badges5151 bronze badges asked Aug 10, 2013 at 10:49 Sagar RajSagar Raj 93944 gold badges1414 silver badges3434 bronze badges 1

• Is it always in the right order? – putvande Commented Aug 10, 2013 at 10:51

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Try this:

$(document).ready(function () {
    $(".ab").on("click", function () {
        $(".ab ul >li").each(function (x, value) {
            var text = $(this).html();

            var dom = $("input,textarea,select").get(x);
            $(dom).val(text);
        });
    })
});  

JSFIDDLE DEMO

You can use a mix of map and each methods to get it working.

Remember that the order is important to get it working. If you have haphazard order, you can use the data-* attributes to store the related field info and then 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 to establish a relationship between the elements as they are no more of the same kind. This will be mapped to the name attribute of the field. Also encased the fields in a container as that makes them easier to 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() {
             // Get the corresponding key value from li.
             var $this =  $(this),
                 key = $this.attr('name');
             // Find the li with that key
            var txt = $('.ab li[data-key="'+ key +'"]').text();

            $this.val(txt);
        });
    });
});

Check Data Fiddle

I'm guessing your inputs are all in a form and that the ul is always in the right order. If that is true you can use:

$(function(){
    $('div.ab').on('click',function(){
        $('form input').each(function(index){
            $(this).val($('div.ab ul li:eq(' + index + ')').html());
        });
    });
});

You can add id for every <li> and bind the click, for example the name:

HTML:

<li id="name">Sahar Raj</li>

jQuery:

$('.ab').on('click', function(){
    $('input[name="name"]').val($('#name').html());
});

var counter = 0;
$("#clickme").click(function() {
   $("#list li").each(function() {
       var text = $(this).text();  
       $("input:eq(" + counter + ")").val(text);
       counter++;
    });
});

http://jsfiddle/PgYjH/1/

You can use this

$('div ul li').click(function () {
    var divIndex = $(this).index();
    var divText = $(this).text();
    $('input').each(function () {
        if ($(this).index() == divIndex) {
            $(this).prop('value', divText);
        }
    });
});

On the click of one <li> it will read its index position and take its value/text. Then look for the <input> with same index and give the value/text to it.

The best would be to have data- attributes on both input and li, to avoid problems if you mix up the order how they are.

DEMO HERE