Issue with adding a list item using JQuery

Question

I have this code which was working earlier. Then I started putting the code into small small functions and now it is not working. I can see that it is adding list item but automatically removing it also. Please guide -

<body>
    <header>
            <h1>Your Ration List</h1>

    </header>
    <div id="container">
        <form class="shopList-form">
            <input id="add" type="text" placeholder="Type new item here" />
        </form>
        <ul id="item_list">
            <li id="base" class="hidden">
                <form>
                    <input class="check" type="checkbox" /> <span class="item">Item</span>

                </form>
                <button class="delete_item hidden"></button>
            </li>
        </ul>

JQuery code -

$(document).ready(function () {
    /* Get user input */
    getItem();

    function getItem() {
        $('input#add').keydown(function (event) {
            if (event.keyCode == 13) {
                addItem();
            }
        });
    }

    function addItem() {
        $('li#base').clone(true).appendTo('#item_list').removeAttr('id').removeClass('hidden');
        $('ul#item_list>li:last>form>span').text($('input#add').val());
        $('input#add').val("");
    }
});

Full code can be found at this JSFiddle -

http://jsfiddle.net/varunksaini/Zjxq5/8/

Tomer · Accepted Answer · 2013-09-29 11:16:21Z

3

Since it is a form, pressing enter not only triggers your function but also submits the form (since there is no action it submits to itself) so the page actually refreshes and that is why the new <li> is gone.

All you need to do is add return false to getItem.

see fiddle: http://jsfiddle.net/Zjxq5/9/

answered Sep 29, 2013 at 11:16

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

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

1 Comment

Varun Over a year ago

Thanks, just realized that and removed the form as I don't need it.

user2828226 · Accepted Answer · 2013-09-29 11:30:26Z

1

The problem you have with your script is that you are using a form and when you press enter it submits the form to the server and reloads the page. You can use the preventDefault() function to avoid that.

$('input#add').keydown(function (event) {

        if (event.keyCode == 13) {
            event.preventDefault();
            addItem();
        }
});

Example: http://jsfiddle.net/rdnKq/1/

edited Sep 29, 2013 at 11:30

user2828226

51 bronze badge

answered Sep 29, 2013 at 11:16

Gorka Lauzirika

3135 silver badges18 bronze badges

2 Comments

Varun Over a year ago

Thanks, just realized that and removed the form as I don't need it.

Gorka Lauzirika Over a year ago

No need to remove the form if you don't want to ;)

Collectives™ on Stack Overflow

Issue with adding a list item using JQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related