Editable list through html, javascript

Question

Here is the UI scenario I'm trying to develop: There is a text box field below which there are two buttons. On clicking the first button , there will be a popup in which the user will have to add a IP address. On pressing submit on the popup , the IP address will be displayed in the text area. The user can keep on adding IP addresses, which will be visible on the text area in different lines. The user should be able to select a particular IP address from the box and delete it using the second button. The user should not be able to enter data directly into the text field. Any ideas ?

IF there's no interaction with the text area (there is no html 'text box' element), why use a textarea (or text input)? Wouldn't a ul or ol be better suited? — David Thomas
– David Thomas, Commented Sep 22, 2011 at 6:19
i was thinking a <select multiple> since he wants to be able to select an IP from the list later. — mpen
– mpen, Commented Sep 22, 2011 at 6:37
Hi, thanks for the answer. A select multiple could be the ideal solution for me , under two conditions: 1. In the presence of 0 elements in my list , the select multiple element should have a particular size that i can define . 2. There should be no scroll bar visible . Is this possible? — DaTaBomB
– DaTaBomB, Commented Sep 22, 2011 at 10:18

jensgram · Accepted Answer · 2011-09-22 06:35:46Z

3

I would suggest you keep clear of using a <textarea> since this involves sniffing selections etc. Instead, use simple container elements (e.g., <li>s in a <ul>/<ol> cf. @David Thomas' comment) to hold the entered IP addresses (one each).

I trust you'll get the idea from this JsFiddle.

HTML

<ul id="addresses"></ul>
<hr />
<a href="#" id="add">Add...</a>

JS (Assuming jQuery. You would need some framework to handle selections too.)

var deleteHandler = function() {
    $(this).parent().remove();
}

$("#add").click(function() {
    var ip = prompt("Enter IP:");
    if (ip) {
        var $deleteIp = $("<a />", {"class": "delete"})
            .text("X")
            .click(deleteHandler);
        $("<li />")
            .text(ip)
            .append($deleteIp)
            .appendTo("#addresses");
    }

    return false;
});

Just a demo — deemed to be a candidate for improvements :)

edited Sep 22, 2011 at 6:35

answered Sep 22, 2011 at 6:30

jensgram

31.6k6 gold badges83 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Editable list through html, javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related