2

我想通过单击包含表单所需所有内容的 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>

形式 -

<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" />

知道如何实现这一目标吗？谢谢

4

6 回答 6

3

试试这个： 

$(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 演示

于 2013-08-10T11:23:09.980 回答
2

您可以混合使用 map和each方法来使其正常工作。

请记住，订单对于使其正常工作很重要。如果你有随意的顺序，你可以使用data-*属性来存储相关的字段信息，然后填充它。

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

检查小提琴

更新

我已经使用 data-* 属性来建立元素之间的关系，因为它们不再属于同一类型。这将映射到字段的名称属性。还将字段封装在容器中，这样更容易选择。

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

检查数据小提琴

于 2013-08-10T10:59:23.437 回答
1

我猜你input的 s 都在 aform中，并且ul总是按正确的顺序排列。如果这是真的，您可以使用：

$(function(){
    $('div.ab').on('click',function(){
        $('form input').each(function(index){
            $(this).val($('div.ab ul li:eq(' + index + ')').html());
        });
    });
});
于 2013-08-10T10:53:34.960 回答
1

您可以为每个添加 id<li>并绑定点击，例如名称：

HTML：

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

jQuery：

$('.ab').on('click', function(){
    $('input[name="name"]').val($('#name').html());
});
于 2013-08-10T10:59:16.917 回答
1

你可以用这个

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

单击一个<li>，它将读取其索引位置并获取其值/文本。然后寻找<input>具有相同索引的并为其提供值/文本。

最好的办法是data- 在 input 和 li 上都有属性，以避免混淆它们的顺序时出现问题。

在这里演示

于 2013-08-10T10:59:18.160 回答
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/

于 2013-08-10T10:59:51.033 回答