CODEWITHSUNDEEP
javascriptjquery
SkyeBoniwell
SkyeBoniwell

Reputation: 7102

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();
});

Upvotes: 0

Views: 68

Answers (4)

Hariprasad
Hariprasad

Reputation: 3642

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();
    });

Upvotes: 1

Nick Tomlin
Nick Tomlin

Reputation: 29241

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.

Upvotes: 1

cssyphus
cssyphus

Reputation: 40068

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();
});

Upvotes: 1

tomaroo
tomaroo

Reputation: 2534

Change

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

To

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

Upvotes: 2

Related Questions