Adding an item to the list when submit jQuery

Question

How can I add an element to my list with clicking on "Add button" without losing style of my "li" in a new element. When I'm trying to add with append() it loses my styling. I know why it loses but I have no idea how to fix it.

<div class="wrapper">

    <input type="text" class="text_field" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
    <input type="submit" class="add_btn" value="Add" />

    <div class="items">
        <ul class="sortable">
            <li>
                <input class='tasks' type='checkbox' />
                <p>Meet Larry at 6pm</p>
            </li>
        </ul>
    </div>
</div>

CSS:

.tasks {
    position: absolute;
    margin: 20px 20px;
    width: 19px;
    height: 19px;
    display: block;
}
.tasks:before {
    content:"";width: 19px;height: 19px;border: 1px solid #43d6b0;
}

If you want to update your question, use the `edit` link, don't put code in comments. — Barmar, May 02 '14 at 21:33
Please show the code you're using to add elements to the list. — Barmar, May 02 '14 at 21:34
Sorry for this mess. It doesn't apply so much symbols of my code — chuckrhodes, May 02 '14 at 22:10

dcclassics · Accepted Answer · 2014-05-02T23:32:56.077

0

<div class="wrapper">
<form name="newItem" id="newItem">
    <input type="text" class="text_field" id="task" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
    <input type="button" id="addItem" class="add_btn" value="Add" />
    </form>
    <div class="items">
        <ul id="tasks" class="sortable">
            <li>
                <input class='tasks' type='checkbox' />
                <p>Meet Larry at 6pm</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>Ovesyan cool mandsadd</p>
            </li>

            <li>
                <input class='tasks' type='checkbox' />
                <p>dsadsa dsadasda adsdasddasdasdasda</p>
            </li>
        </ul>
    </div>
</div>
<script>
    $("#addItem").click(function(){
        var task = $('#task').val();
        $("#tasks").append("<li><input class='tasks' type='checkbox' /><p>" + task + "</p></li>");
      });

     $("#newItem").on('submit',function(e){                 
       //add stuff to database if necessary
         e.preventDefault();
         return false;
      });
</script>

This should do what you're looking for. See demo here.

Edit: See final fiddle here

edited May 02 '14 at 23:32

answered May 02 '14 at 22:18

dcclassics

896
1
12
38

li{border-right: 6px solid;} And I made colors of the border randomly changeable. Everything is good with your answer except this. Can you please edit this too? Thanks @dcclassics – chuckrhodes May 02 '14 at 22:28
How can I store my tasks to make them not disappear after refreshing page? – chuckrhodes May 02 '14 at 22:35
You'll either have to write them to a file or a database. That's a little bit more complicated than we can really solve here. See [this](http://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript), or [this](http://stackoverflow.com/questions/20823535/how-to-write-data-into-a-json-file-using-jquery) to see how to write to local storage using JSON. Else, you'll have to learn how to use a server side programming language like PHP to write files or into a database. Someone else may have an easier solution for you. – dcclassics May 02 '14 at 22:36
http://jsfiddle.net/Q7ZWM/1/ I'm not sure if this is exactly how you wanted to look? – dcclassics May 02 '14 at 22:36
Thanks for explanation about storin tasks! – chuckrhodes May 02 '14 at 22:50
You see, if we add a new item , it will appear without a border and checkboxes don't work in new items too – chuckrhodes May 02 '14 at 22:54
Ah yes, it's also unclickable. – dcclassics May 02 '14 at 22:55
That's what I'm talking about:) – chuckrhodes May 02 '14 at 22:55
So the reason it's happening, is because the style is being applied to all of the items on page load, and then it's not being applied again once you add new items. A very incorrect but working solution is to just apply them again when you add an item: http://jsfiddle.net/9NsmS/6/ – dcclassics May 02 '14 at 23:08

Adding an item to the list when submit jQuery

1 Answers1