How to dynamically add List items in jQuery

Question

I am developing an mobile app in which i want to populate ListView once the user fill up the form and click on submit button.

I know how to give List View in jQuery but how to populate items in it dynamically at run time?

Answer 1

Are you looking for something like this?

jsFiddle Demo:

HTML:

<div id="listView"></div>
<input type="button" id="mybutt" value="Submit" />

javascript/jQuery:

$('#mybutt').click(function() {
    var out = '<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>';
    $('#listView').html(out);
});

---

Responding to your comment: "what i need is on click of button form gets submitted and firstname which user enters on form will get added in list"

First, you need to remain on the page after the form was submitted. To do that, you should add e.preventDefault(); in your submit routine:

$( "#target" ).submit(function( event ) {
    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom)
    event.preventDefault();
});

Next, you want to get the data that was in the desired field, and add that to the <ul>. Therefore, change the above like this:

$( "#target" ).submit(function( event ) {
    var fn = $('#fname').val();
    $('ul').append('<li>' +fn+ '</li>');

    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom)
    event.preventDefault();
});

For the AJAX bit, see this post for tips.

Note that you can use $('#formID').serialize(); to quickly serialize all form data.

Answer 2

js fiddle:

http://jsfiddle.net/7PzcN/1/

html:

<div id="listView"></div>
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
<input type="button" id="mybutt" value="Submit" />

jquery:

$('#mybutt').click(function() {
    var out = '<ul>';
    $("input[type=text]").each(function() {
        out += "<li>" + $(this).val() + "</li>";
    });
    out += "</ul>";
    $('#listView').html(out);
});