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

Refresh

March 2019

Views

69 time

1

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.

4 answers

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

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

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

0

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>