通过点击div - jQuery填充输入 [英] Fill inputs by clicking on div - jQuery
问题描述
我想通过点击具有表单所需内容的div来自动填写表格。
我的div -
< div class =ab >
< ul>
< li> Sahar Raj< / li>
< li>地址。< / li>
< li>城市< / li>
< li>州< / li>
< li> Pin< / li>
< li> 9876543210< / li>
< / ul>
< / div>
表格 -
< input class =requiredtype =textname =name/>
< input class =requiredtype =textname =city/>
< select name =state>
< option value =0> State1< / option>
< option value =1> State2< / option>
< / select>
< input class =requiredtype =textname =pin/>
< input class =requiredtype =textname =phone/>
任何想法如何实现？谢谢
您可以混合使用 map 和每个方法来使它工作。
记住顺序对于它的工作很重要。如果您的订单杂乱无章，您可以使用 data - * 属性来存储相关字段信息，然后填充它。
（函数（）{
$（'div.ab'）。click（函数（）{
var data = $（'。ab li'）。map（function （）{
return this.innerHTML;
//或返回$（this）.text（）;
））。get（）;
$（ 'input'）。each（function（i）{
this.value = data [i];
//或$（this）.val（data [i]）;
} ）;
}）;
}）;
我已经使用data- *属性来建立元素之间的关系，因为它们不再是同一种类型。这将被映射到字段的名称属性。 HTML
$ b
也包含在容器中的字段
< div class =ab>
< ul>
< li data-key =name> Sahar Raj< / li>
< li data-key =地址>地址。< / li>
< li data-key =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 =requiredtype =textname =name/>
< input class =requiredtype =textname =city/>
< select name =state>
< option value =0> State1< / option>
< option value =1> State2< / option>
< / select>
< input class =requiredtype =textname =pin/>
< input class =requiredtype =textname =phone/>
< / div>
JS
< $（$。$'$'）$（$。$'$'$'$'$'$'$'$'$' ）.each（function（）{
//从li获取相应的键值
var $ this = $（this），
key = $ this.attr（'name'） ;
//用这个键找到li
var txt = $（'。ab li [data-key =''+ key +'''）.text（）;
$ this.val（txt）;
}）;
}）;
}）;
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
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]);
});
});
});
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);
});
});
});
这篇关于通过点击div - jQuery填充输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
