Question

I have a single text field and an accompanying “add” button:

<fieldset id="itemList">
    <input type="text" id="addItem" name="addItem">
    <input type="button" name="add" value="add">
</fieldset>

Whenever someone clicks “add” I’d like to add the new item to the list below and clear the input field above.

<hr>
<ol id="resultList">
    <li>just example</li>
    <li>new text input</li>
    <li>last entered item</li>
</ol>

I’m not sure how to accomplish this in jQuery. Can you help?

For bonus, I’d like to limit the list to 10. So I need to somehow count the number of list items and make the above form’s display contingent on <11 list items.

Can you help?

Answer 1

jQuery(function($){
    $('input[name="add"]').click(function() {
        if($('#resultList li').length < 10)
        {    value = $('input[name="addItem"]').val();
             $('ol li:last').after("<li>" + value + "</li>");
             $('input[name="addItem"]').val(""); }
        if($('#resultList li').length == 10)
        {   $('input[name="addItem"]').css("display", "none");
            $('input[name="add"]').css("display", "none"); }
    });
});

Working jsFiddle here: http://jsfiddle.net/bhZdz/2/

Edited because I didn’t see the last part of your question, form hides after 10th element is added now.