How can I extract the text from the input box and add them to a div in the bottom

Question

I have small piece of html which has two input boxes and a checkbox with a button Add as follows:

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

I want to extract the data entered into the text box and add it in a line in the bottom div "persisted-items" on click of the Add button. Also, I want to add a small icon or a link "Delete" beside that in a row so that I can delete it when clicked.

I tried experimenting with the same kind of scenario using the table rows, but couldn't go further.

I did something like the following to extract the information and add to the div.:

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

Please help,

Thank you.

Answer 1

This should do it for you, simple javascript:

See fiddle 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

Here is a jsfiddle: http://jsfiddle.net/k35x4pz5/ to display informatons and remove them.

I added a function to remove a node:

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

And, when you display data from the user, I added a call of this method:

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

Add jquery link and move the click event inside ready

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

are you looking for something like this?

 $(document).ready(function() { $('#add-btn').click(function(){ var newHtml = '<div>Items: ' + $("#items").val() + ', Quantity: ' + $("#quantity").val() + ', In Order: ' + $("#in-order").val() + ' <div class="btn btn-danger deleteBtn">Delete</div></div>' ; $("#persisted-items").append(newHtml); $("#items").val(''); $("#quantity").val(''); }); $(document).on('click', '.deleteBtn', function() { $(this).parent('div').remove(); }); }); 

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