Question

Still learning this language on the side of my normal career and when getting the chance I tty to put together simple examples. This one is a To Do List in which a user enters a chore and clicks the button submitting the entry to be displayed below. However the below code, as correct as it looks (to me) it just won’t do as intended…

HTML (between Body tags)

<div id="toDoContainer">
    <h1>To Do</h1>
    <p>Here's your very own to do list, complete with added jQuery</p>
    <form id="toDo">
        <input type="text" name"toDoEntry" />
        <button id="addButton">Add</button>
    </form>

    <div id="toDoList"></div>

    <p>Tick a box next to your entry show as complete</p>
</div>

jQUERY:

$(document).ready(function(){
    $('button').click(function() {
        var toDoItem = $('input[name=toDoEntry]').val();
        if(toDoItem.length === 0) {
            alert('You need to add an entry into the toDo list');
        } else {
            $('#toDoList').append(toDoItem);
        }
    });
});

Any ideas as to where I’m going wrong?

Simon

Answer 1

You have a simple HTML syntax error.

Change:

 <input type="text" name"toDoEntry" />

To:

 <input type="text" name="toDoEntry" />

---

Also remove your <form> tag. This will navigate you away from the current instance of the page.

For more information on HTML Forms, read this helpful blog post:

http://webdesign.about.com/od/forms/ss/html-forms-tutorial.htm

---

I would also recommend splitting your “to do list items” or else they will be concatenated to each other.

For example, if you add “Task 1” and “Task 2”, this will become “Task 1Task2”. I recommend putting them in a <ul> list:

$(document).ready(function(){
    $('button').click(function() {
        var toDoItem = $('input[name=toDoEntry]').val();
        if(toDoItem.length === 0) {
            alert('You need to add an entry into the toDo list');
        } else {
            var $li = $("<li/>");
            $li.append(toDoItem);
            $('#toDoList').append($li);
        }
    });
});​

---

— SEE WORKING DEMO —