如何从输入框中提取文本并将其添加到底部的d​​iv中

Question

我有一小段html，它有两个输入框和一个带按钮的复选框Add，如下所示：

<div class="row">
            <div class="form-group col-xs-4">
                <input type="text" class="form-control" id="items" name="items" placeholder="Enter item description">
            </div>
            <div class="form-group col-xs-3">
                <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
            </div>
            <div class="form-group">
                <div class="form-group col-xs-3">
                    <div class="form-group">
                        <div class="checkbox">
                            <input type="checkbox" id="in-order" name="in-order">
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-2">
                    <div class="btn btn-primary" id="add-btn">Add</div>
                </div>
            </div>
        </div>

     <div id="persisted-items"></div>

我想提取输入到文本框中的数据，并在单击“添加”按钮时将其添加到底部div“persisted-items”中的一行中。此外，我想在一行旁边添加一个小图标或“删除”链接，以便我可以在点击时将其删除。

我尝试使用表格行尝试相同类型的场景，但无法继续下去。

我做了类似以下的事情来提取信息并添加到div。：

$('#add-btn').click(function(){
  $("#persisted-items").append($("#items").val());
  $("#persisted-items").append($("#quantity").val());
  $("#persisted-items").append($("#in-order").val());
});

请帮忙，

谢谢。

Answer 1

这应该为你做，简单的javascript：

请参阅小提琴http://jsfiddle.net/DIRTY_SMITH/7oebee2m/6/

<input id="input" type="textarea">
<button id="button" onclick="return add()">ADD</button>
<script>
    function add() {
        var button = document.getElementById("input").value;
        if (button == null || button == ""){
        return false;
    }
        document.getElementById("button").innerHTML = button;
    }
</script>

Answer 2

这是一个jsfiddle：http://jsfiddle.net/k35x4pz5/来显示信息按钮并删除它们。

我添加了一个删除节点的功能：

function removeNode(nodeId) {
    document.getElementById("item"+nodeId).remove(); 
};

并且，当您显示来自用户的数据时，我添加了此方法的调用：

var counter = 0;
$('#add-btn').click(function(){
    $("#persisted-items").append("<div id='item"+counter+"'><span onclick='removeNode("+counter+")'>[ delete ]</span> "+  $("#items").val() + " - " + $("#quantity").val() + " - " + $("#in-order").val() +" </div>");
    counter++;
});

Answer 3

添加jquery链接并将click事件移到准备好的

中

$(document).ready(function(){
$('#add-btn').click(function(){
$("#persisted-items").append($("#items").val());
$("#persisted-items").append($("#quantity").val());
$("#persisted-items").append($("#in-order").val());
});
});

http://plnkr.co/edit/A7aERfdWW19PzFyjFAFa?p=preview

Answer 4

你正在寻找这样的东西吗？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="form-group col-xs-4">
        <input type="text" class="form-control" id="items" name="items" placeholder="Enter item description"/>
    </div>
    <div class="form-group col-xs-3">
        <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity"/>
    </div>
    <div class="form-group">
        <div class="form-group col-xs-3">
            <div class="form-group">
                <div class="checkbox">
                    <input type="checkbox" id="in-order" name="in-order"/>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-2">
            <div class="btn btn-primary" id="add-btn">Add</div>
        </div>
    </div>
</div>

<div id="persisted-items">
    
</div>

select name, title, rank from db1.tbl1, 
db2.tbl1,db2.tbl2 
where db2.tbl1.id=db2.tbl.id
and db1.tbl1.person_id=db2.tbl2.person_id;