add to list with contents from form

I have a form that the user can enter in a title and a date. When the user clicks the 'Add New' button, the contents of the form should be displayed above. That parts works, but whenever they enter in new info, the previous content is just replaced...where it should add to the list.

Any ideas on how to get it to work?

Thanks

Here is the jsFiddle: http://jsfiddle.net/beqqC/1/

Here is the code:

$("#add").on('click', function () {
    $(".title").html($("[name=title]").val());
    $(".date").html($("[name=date]").val());
    $("#view").show();
});

Answers


You can use a combination of jQuery's append and element creation methods to make things slightly cleaner:

$("#add").on('click', function () {
    $(".title").append(
        $('<div>', {
           text: $("[name=title]").val(), 
           className: 'title'
        }));
    $(".date").append($('<div>', {
        text: $("[name=date]").val(), 
        className: "date"
    }));
    $("#view").show();
});

jsfiddle

This will create a div with the specified class within your .title and .date divs.


Change

$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());

To

$(".title").append($("[name=title]").val());
$(".date").append($("[name=date]").val());

Use append, and perhaps add a <br /> code to the end:

jsFiddle here

$("#add").on('click', function () {
    $(".title").append($("[name=title]").val()+'<br />');
    $(".date").append($("[name=date]").val()+'<br />');
    $("#view").show();
});

You should use append() method. Just put a line break before if you want vertical list

 $("#add").on('click', function () {
        $(".title").append("<br />" + $("[name=title]").val());
        $(".date").append("<br />" + $("[name=date]").val());
        $("#view").show();
    });

Need Your Help

Crashing when loading zip using cocos2d-x

android cocos2d-x

I have a problem using cocos2d-x on android.

System.ArgumentException: The modelEntityContainerName parameter contains characters that are not valid

frameworks entity reverse

I've tried to use Entity Frameworks Power Tools Reverse Engineer Code First for a SQLServer database and received the following error:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.