Fill inputs by clicking on div - jQuery

Question

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

Is it always in the right order? – putvande Aug 10 '13 at 10:51 — putvande, Aug 10 '13 at 10:51

Dhaval Bharadva · Answer 1 · 2013-08-10T11:43:17.557

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

edited Aug 10 '13 at 11:43

answered Aug 10 '13 at 11:23

Dhaval Bharadva

3,053
2
24
35

Sushanth -- · Accepted Answer · 2013-08-10T11:31:15.700

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

if we use textarea ans select, it doesn't work. Otherwise, it works fine with this order. — Sagar Raj, Aug 10 '13 at 11:15
You would have to go with a different approach if you want to use textarea inplace of input — Sushanth --, Aug 10 '13 at 11:17
Thank you very much for your answer. But the select field isn't working. Can you give me an idea how to get it work? — Sagar Raj, Aug 10 '13 at 11:41
You don't have an option called **State** in your list of options. You only have `State1` and `State2` .. Glad to have helped :)\ — Sushanth --, Aug 10 '13 at 11:43
Even if i have an option called state, it wont work :) But i think i'll change it to input field. — Sagar Raj, Aug 10 '13 at 11:52

score 1 · Answer 3 · answered Aug 10 '13 at 10:53

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());
        });
    });
});

score 1 · Answer 4 · answered Aug 10 '13 at 10:59

1

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());
});

answered Aug 10 '13 at 10:59

Daniele

1,938
16
24

Sergio · Answer 5 · 2013-08-10T11:05:09.607

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

score 1 · Answer 6 · answered Aug 10 '13 at 10:59

1

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

http://jsfiddle.net/PgYjH/1/

answered Aug 10 '13 at 10:59

Darren

68,902
24
138
144

Fill inputs by clicking on div - jQuery

6 Answers6

DEMO HERE

Linked