[英]How to get values separately from html elements to specfic html element field using javascript and jquery
There are two fields named with Add item 1 and Add item 2 有两个字段,分别以添加项目1和添加项目2命名
When the user click on the Button 1 the elements values from Add item 1 and Add item 2 copied to another place named with item list 1 . 当用户单击按钮1时 ,“ 添加项目1”和“ 添加项目2”中的元素值将复制到以项目列表1命名的另一个位置。
Now I want to get the values from Add item 1 to item list 1 by clicking on the Button 1 and Add item 2 to item list 2 by clicking on the Button 2 . 现在我想通过点击按钮1获得从新增项目1 项列表1中的值,并通过点击按钮2 项列表中 添加 2 第2项 。
The working code link of my fiddle is in comment. 我的小提琴的工作代码链接在注释中。 I have indent all code by 4 spaces but its not allowing me to paste my fiddle link in the post.
我将所有代码缩进了4个空格,但不允许我将小提琴链接粘贴到帖子中。
If I have made a mistake in this post please edit it. 如果我在此帖子中犯了一个错误,请对其进行编辑。 Bundle of thanks for your help.
捆绑感谢您的帮助。
Add a unique identifier to separate your 2 forms ,I use here a data attribute on the form to identify in what list to put the elements, use find
and this
to select the content relative to the submitted form 添加一个唯一的标识符来分隔您的2个表单,我在这里使用表单上的数据属性来标识将元素放置在哪个列表中,并使用
find
和this
来选择相对于所提交表单的内容
html: 的HTML:
<!-- Item List 1 -->
<div id="grocery-list">
<h3>Item List1</h3>
<ul>
<li class="empty">Empty</li>
</ul>
</div>
<!-- Item List 2-->
<div id="grocery-list2">
<h3>Item List2</h3>
<ul>
<li class="empty">Empty</li>
</ul>
</div>
<!-- Add Item 1 -->
<form data-id="grocery-list">
<fieldset>
<legend style="width :500px; margin-top:0px">Add Item 1</legend>
<label for="item">Item Name:</label>
<br>
<!-- Input text field -->
<input class="item" type="text" style="cursor: pointer;" value=" ">
<label></label>
<br>
<br>
<select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select">
<option class="item" sty>mg</option>
<option class="item" value="saab">ml</option>
</select>
<select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select">
<option>STAT(once immediately)</option>
<option>OD(once in a day)</option>
<option>BiD(twice in a day)</option>
<option>TiD(thrice in a day)</option>
<option>QiD(four times a day)</option>
</select>
<select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select">
<option>1 day</option>
<option>2 days</option>
<option>3 days</option>
</select>
<input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;">
<label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label>
<input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px">
<label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label>
<button class="button button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 1</button>
</fieldset>
</form>
<!-- Add Item 2 -->
<form data-id="grocery-list2">
<fieldset>
<legend style="width :500px; margin-top:100px">Add Item 2</legend>
<label for="item">Item Name:</label>
<br>
<!-- Input text field -->
<input class="item" type="text" style="cursor: pointer;" value=" ">
<label></label>
<br>
<br>
<select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select">
<option class="item" sty>mg</option>
<option class="item" value="saab">ml</option>
</select>
<select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select">
<option>STAT(once immediately)</option>
<option>OD(once in a day)</option>
<option>BiD(twice in a day)</option>
<option>TiD(thrice in a day)</option>
<option>QiD(four times a day)</option>
</select>
<select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select">
<option>1 day</option>
<option>2 days</option>
<option>3 days</option>
</select>
<input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;">
<label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label>
<input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px">
<label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label>
<button class="button1 button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 2</button>
</fieldset>
</form>
js: js:
$("button").button();
function addToList(items, list) {
var $list = $('#'+list).find("ul");
$list.empty();
jQuery.each(items, function(i, text) {
$list.append("<li>" + text + " <a class='delete_li'>✖</a> </li>");
});
}
$("body").on("click", ".delete_li", function() {
$(this).closest("li").remove();
});
$("form").on("submit", function(a) {
list = $(this).attr('data-id');
a.preventDefault();
$(this).find("fieldset").effect("transfer", {
to: "#"+list+" ul",
complete: function() {
var items = [];
// add text box values first
$(this).find('input[type=text]').each(function() {
items.push($(this).val());
});
// then add checkbox label texts if checked
$(this).find("input:checked").each(function() {
items.push($(this).next().html());
});
// finally, add the selected option values
$(this).find('select :selected').each(function() {
items.push($(this).val());
});
addToList(items,list);
}
});
});
demo: http://jsfiddle.net/6kjwouhd/1/ 演示: http : //jsfiddle.net/6kjwouhd/1/
In your addToList()
function (as well as in the to
parameter of effect()
), no matter which button you choose, you are setting the receiving list to #grocery-list ul
which is Item list 1 . 在
addToList()
函数中(以及effect()
的to
参数中),无论选择哪个按钮,都将接收列表设置为#grocery-list ul
,即Item list 1 。
You might have to modify it to identify which button has been clicked, perhaps by passing the button number (1 or 2) as parameter to addToList
so that you can use the correct list id ( grocery-list
or grocery-list2
). 您可能需要对其进行修改,以标识单击了哪个按钮,也许是通过将按钮编号(1或2)作为参数传递给
addToList
以便可以使用正确的列表ID( grocery-list
或grocery-list2
grocery-list
grocery-list2
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.